Question

我有一个嵌入式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中，所以问题似乎在链接[i] .style.fill

任何想法？

Answer 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");
}

OR

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

希望这有帮助。

firefox js getSVGDocument（）。getElementsByClassName（'myClass'）坏了吗？

1 个答案: