如何更改使用< object>链接的svg的填充在HTML中标记? [英] How to change fill of svg which is linked using <object> tag in HTML?

问题描述

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

I have an HTML file in which I have linked an svg object:

<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中某处的按钮时，我希望圆圈的颜色变为黑色.

When the user clicks on a button, which is in the HTML somewhere, I want the color of the circle to change to black.

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

I researched and found this JS, which I also added to the HTML, but it didn't work

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

有没有不用内联svg的方法吗?

Is there any way to do it without using inline svg

推荐答案

是的，您可以在没有内置SVG的情况下完成此操作，并且您已经很接近正确的答案了.

Yes you can do it without inline SVG and you're pretty close to the right answer already.

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

You've the arguments in the wrong place for setProperty. This works for me:

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

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

The colour you want to set should be the second argument.

这篇关于如何更改使用< object>链接的svg的填充在HTML中标记?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！