Question

这是my site，它适用于Firefox，但是，在使用chrome或opera访问它时，＆＃39;相框＆＃39;没出现。

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

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

由于＆＃39;相框＆＃39;没有显示，并且由于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和MathML元素，其开始标记具有单个”/“字符在结束之前“＆gt;”据说字符被标记为自闭“。

SVG脚本元素应该被识别为HTMLSVGElement中的外部元素，因此如果没有内容，则应该允许自闭标记。

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

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

1 个答案: