内联 SVG：chrome 和 opera 无法检测到外部资源答案

【问题标题】：Inline SVG : external resource cannot be detected by chrome and opera内联 SVG：chrome 和 opera 无法检测到外部资源
【发布时间】：2015-12-26 18:06:43
【问题描述】：

这是my site，它在 Firefox 上运行良好，但是，在使用 chrome 或 opera 访问它时，“相框”不显示。

我特意将父<svg>元素的高度设置为0%<svg height="0% onload="init()"...>，然后在所有svg DOM结构加载完毕后，我将其设置为100%高度

function init(){
  mySvg=Snap("#mySvg");
  //....a lot of elements initializations
  mySvg.attr({height:"100%"});
}

由于“相框”没有显示，并且由于 chrome 和 opera 上的开发人员控制台显示此错误消息：Uncaught ReferenceError: Snap is not defined，我只是得出资源 snap.svg-min.js 的结论（快照库）无法检测到（我已将它包含在打开父级<svg> 标记附近，下面有这一行：

<script xlink:href="/resources/snap.svg-min.js" type="text/ecmascript"/>

这引出了一个问题：为什么？这在 Firefox 上运行良好，chrome 和 opera 是否需要不同的语法来将外部资源包含到内联 SVG 中？

【问题讨论】：

如果 svg 无论如何都要内联，我觉得你可能会有更一致的行为，将所有 js 代码（如 Snap）保持在 svg 代码之外。

标签： html svg snap.svg

【解决方案1】：

问题出在自闭<script ... />标签上。

Chrome 在这里有问题：根据the specs

“开始标签有一个“/”字符的SVG和MathML元素在结束“>”字符之前被称为标记为自动关闭。”

SVG 脚本元素应该被识别为 HTMLSVGElement 中的外来元素，因此如果它没有内容，则应该允许使用自闭合标签。

要解决这个问题，最好的解决方案是始终使用显式结束标记：</script>。

【讨论】：