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

Question

这是 my site，它在 Firefox 上运行良好，但是，在使用 chrome 或 opera 访问它时，'picture frame' 没有显示。

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

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

因为 'picture frame' 没有出现，而且 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 中？

Answer 1

问题来自自关闭 <script ... /> 标签。

Chrome 这里有问题：根据 the specs

"SVG and MathML elements whose start tags have a single "/" character before the closing ">" character are said to be marked as self-closing."

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

要解决此问题，最好的解决方案是始终使用明确的结束标记：</script>.

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

Inline SVG : external resource cannot be detected by chrome and opera

html

svg

snap.svg