jv在svg中的奇怪行為

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文本標簽'CLICK ME'甚至不可見。 唯一的區別是注釋代碼！ 問題是什么 ？

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進行轉義。

Answer 2

因為coomments應該如此： 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>