如何使 HTML 中嵌入的内嵌 SVG 加载其 xlink:href 依赖项？答案

【问题标题】：How to make an SVG embedded inline in HTML load its xlink:href dependencies?如何使 HTML 中嵌入的内嵌 SVG 加载其 xlink:href 依赖项？
【发布时间】：2016-01-20 10:02:13
【问题描述】：

我有 SVG 文件，我需要将其嵌入到 HTML 文件中（使用 HTML5 <svg> 标记）。这些 SVG 文件具有 JavaScript 依赖项，如下所示：

<script type="text/javascript"
    xlink:href="http://gnuplot.sourceforge.net/demo_svg_4.6/gnuplot_svg.js">
</script>

这是具有该脚本依赖性的standalone SVG 图像。要激活 JavaScript，您可以单击图像，然后光标后面会出现一个框，告诉您 (x,y) 坐标。

但是，here is the same image 直接嵌入到 HTML 文档中。根据 web 检查器，浏览器甚至从不尝试加载 JavaScript 依赖项。当您单击并在图像周围移动光标时，控制台会充满一堆参考错误。

如何让嵌入式版本像独立版本一样加载其 JavaScript 和功能？

【问题讨论】：

您的 JS Bin 在控制台中显示 JS 错误。
@CBroe 确实如此。它说：“未捕获的 ReferenceError：未定义 gnuplot_svg。”该变量 gnuplot_svg 在未加载的 JavaScript 文件中定义。

标签： javascript xml svg gnuplot xlink

【解决方案1】：

您链接的文档中的代码使用自关闭 <script> 并且不起作用（不确定这是否是浏览器中的错误）。

你写的代码：

<script type="text/javascript"
    xlink:href="http://gnuplot.sourceforge.net/demo_svg_4.6/gnuplot_svg.js">
</script>

至少会加载脚本，但随后脚本会假定文档的根元素是 <svg> 元素（它使用 getScreenCTM），而在 HTML 文档中，根元素将是 <html> 元素。

也许它对你没有帮助，但你需要一个不同版本的脚本。

【讨论】：

请注意，在 svg 元素中使用自闭合标签应该可以工作，因为 svg 元素的内容应该使用 xml 解析器而不是 html 解析器来解析。
对结束脚本标签的良好观察。不幸的是，由于文档根目录，该脚本仍然无法工作，但我会接受该帖子，因为它回答了有关加载 JavaScript 元素的问题。
Lister 先生，感谢您修复响应的语法！