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", "");

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

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

1 个答案: