0

我有一个嵌入式 SVG，使用 js 更改 20 种路径填充颜色，它们都具有相同的类。

<script>
function svgMod(){  
    //var links = document.getElementById("tornado5").getSVGDocument().
    //    getElementsByClassName('SVGlogo');
    var links = document.getElementById("tornado5").contentDocument.
        getElementsByClassName('SVGlogo');

    for (var i=0;i<links.length;i++) { links[i].style.fill="00ff00"; }  
}
</script>
<object type="image/svg+xml" id="tornado5" data="bitmaps/frames/tornado2.svg">
</object>        <!-- cant use img -->
<button onclick="svgMod();" >Click to change</button>

它适用于 Chrome，但不适用于 Firefox。我尝试了 contentDocument 和 getSVGDocument()，但没有帮助。links.length 是 20，即使在 Firefox 中也是如此，所以问题似乎出在 links[i].style.fill

有任何想法吗？

4

1 回答 1

1

您可以尝试更改此行：

for (var i=0;i<links.length;i++) { links[i].style.fill="00ff00"; }

对此：

for (var i=0; i < links.length; i++) {
    links[i].setAttribute("fill", "#00ff00");
}

或者

for (var i=0; i < links.length; i++) {
    links[i].style.fill = "#00ff00";
}

希望这可以帮助。

于 2013-01-02T06:45:18.143 回答