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文本标签“点击我”甚至不会显示。唯一的区别是有注释的代码！问题出在哪里？

- Pmb

---

在HTML文件中使用JavaScript注释可能会导致这些问题，如果注释被错误解析。这是将所有JavaScript与HTML混合使用而不是分开放置的另一个理由。如果必须将JavaScript放在HTML文件中，请将所有脚本标签保留为body中的最后一个标签，以便在创建所有HTML节点之后才对其进行解析。内联JavaScript可能会导致此类行为。 - Shilly

Answer 1

通过浏览器，您可以看到此内容的解析结果。在Chrome中，我得到了以下结果：

实际上，这不是由于注释块/*，而是由于在for循环中使用的<被解释为HTML <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规定，需要进行转义处理。

- Hacketo

Answer 2

由于注释应该是这样的： http://jsfiddle.net/btux9s2d/3/

<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>

- justtry

---

不建议在脚本块中使用HTML注释。查看此链接 - Ahmad Ibrahim