svg 中的 javascript 奇怪行为

Question

以下 html 代码有效(Chrome 44、Firefox 37):

<svg width="100" height="100">

    <script>
        function test() {
            var l= [0,1,2,3];
            console.log(l.length);
        }
    </script>

    <text x="20" y="20" onclick="test()">CLICK ME</text>

</svg>

但这不是:

<svg width="100" height="100">

    <script>
        function test() {
            var l= [0,1,2,3];
            console.log(l.length);
            /*for (var i=0; i<l.length; i++) {
	        console.log(i);
            }*/
          }
    </script>

    <text x="20" y="20" onclick="test()">CLICK ME</text>

</svg>

svg 文本标签“点击我”甚至都不可见。唯一的区别是注释代码! 有什么问题？

Answer 1

用你的浏览器你可以看到这是如何解析的，在 Chrome 上我有这个结果

其实这不是因为评论 block /*但因为 <在解释为 HTML 的 for 循环中使用 <l.length>

您可以使用 CDATA 避免 HTML 解析器解析这段代码

<svg width="100" height="100">

    <script><![CDATA[
        function test() {
            var l= [0,1,2,3];
            console.log(l.length);
            /*for (var i=0; i<l.length; i++) {
	        console.log(i);
            }*/
          }
    ]]></script>

    <text x="20" y="20" onclick="test()">CLICK ME</text>

</svg>

发生这种情况是因为这 <script> 元素与 HTML 中定义的元素不完全相同。它还提供与不支持脚本语言的浏览器的兼容性，因此符合 W3C它需要被转义。