javascript - 如何更改使用 HTML 中的 <object> 标签链接的 svg 的填充？

Question

我有一个 HTML 文件，其中链接了一个 svg 对象:

<object id="svgGlasses" type="image/svg+xml" data="images/glasses.svg"></object>

和glasses.svg如下

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="42.604px" height="42.604px" viewBox="0 0 42.604 42.604" style="enable-background:new 0 0 42.604 42.604;"
 xml:space="preserve"> 
    <style type="text/css">
    <![CDATA[
        .circle{fill:#FAED24;}
    ]]>
    </style>
    <g id="Circle">
        <circle id="svgInternalID" class="circle" cx="21.302" cy="21.302" r="19.802"/>
    </g>
</svg>

当用户单击 HTML 中某处的按钮时，我希望圆圈的颜色变为黑色。

我研究发现了这个JS，我也将其添加到HTML中，但它不起作用

var Head= document.getElementById("svgGlasses").contentDocument();
Head = Head.getElementById("svgInternalID");
Head.style.setProperty("fill","color", "#ff0000");

有没有什么方法可以在不使用内联 svg 的情况下做到这一点

Answer 1

是的，你可以在没有内联 SVG 的情况下做到这一点，而且你已经非常接近正确的答案了。

setProperty 的参数放置在错误的位置。这对我有用:

var Head= document.getElementById("svgGlasses").contentDocument();
Head = Head.getElementById("svgInternalID");
Head.style.setProperty("fill","#000000", "");

您要设置的颜色应该是第二个参数。