用作背景图像时修改SVG填充颜色

  • Z时代
  • 2024-01-10
  • 分类：问答

将SVG输出直接与页面代码内联放置，我能够像这样简单地使用CSS修改填充颜色：

polygon.mystar {
    fill: blue;
}​
circle.mycircle {
    fill: green;
}

这很好用，但是我正在寻找一种方法，当它用作Background-IMAGE时，修改SVG的“填充”属性。

html {      
    background-image: url(../img/bg.svg);
}

现在如何更改颜色？可能吗

作为参考，这是我的外部SVG文件的内容：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="320px" height="100px" viewBox="0 0 320 100" enable-background="new 0 0 320 100" xml:space="preserve">
<polygon class="mystar" fill="#3CB54A" points="134.973,14.204 143.295,31.066 161.903,33.77 148.438,46.896 151.617,65.43 134.973,56.679 
    118.329,65.43 121.507,46.896 108.042,33.77 126.65,31.066 "/>
<circle class="mycircle" fill="#ED1F24" cx="202.028" cy="58.342" r="12.26"/>
</svg>

回答：

一种方法是从某种服务器端机制为svg提供服务。只需创建一个资源服务器端即可根据GET参数输出svg，然后将其提供给特定的网址。

然后，您只需在CSS中使用该网址即可。

因为作为背景img，它不是DOM的一部分，因此您无法操纵它。另一种可能性是定期使用它，以常规方式将其嵌入页面中，但将其绝对定位，使其完全具有页面的宽度和高度，然后使用z-

index css属性将其置于所有其他DOM元素之后在页面上。

以上是 用作背景图像时修改SVG填充颜色 的全部内容， 来源链接： utcz.com/qa/414992.html

回到顶部