jv在svg中的奇怪行为

Question

以下html代码正常运行（Chrome 44，Firefox 37）：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但这不是：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

svg文字标记＆＃39;点击我＆＃39;甚至不可见。唯一的区别是注释代码！ 有什么问题？

Answer 1

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

实际上这不是因为评论块/*，而是因为for-loop中使用的<被解释为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

因为共同点 应该如此： 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>