Question

我正在尝试将脚本标记嵌套在SVG标记内，但SVG在Safari中显示为空白。

以下小提琴适用于FF 15.0，Chrome 21.0和IE9，但不适用于Windows上的Safari 5。

<svg height="320" width="320" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"> 
    <script >
    setTimeout("run()",1000);

    function run(){
        var e = document.getElementById("rect");
        console.log(e);
        setTimeout("run()",1000);
    }
    </script>
    <rect id="rect" ry="6" rx="6" fill="silver" height="320" width="320" y="0" x="0"/>
</svg>

SVG直接嵌入到HTML中。如果删除了脚本标记，则此方法有效，如果您检查SVG，您将看到脚本标记包含以下SVG元素。为什么？有什么办法吗？

Answer 1

JSFiddle需要你在javascript面板中编写javascript代码。你在html面板中编写javascript代码，而JSFiddle无法正确运行它。

正确的方法是：

http://jsfiddle.net/5rnbU/7/

在html面板中编写html：

<svg height="320" width="320" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"> 
    <rect id="rect" ry="6" rx="6" fill="silver" height="320" width="320" y="0" x="0"/>
</svg>

在javascript面板中编写javascript：

setTimeout("run()",1000);

function run(){
    var e = document.getElementById("rect");
    console.log(e);
    setTimeout("run()",1000);
}

不要在html面板中全部写出来。

嵌套在直接嵌入HTML中的SVG标记的脚本标记会导致SVG显示为空白

1 个答案: