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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (48)

将SVG输出直接与页面代码内联,我可以简单地用CSS修改填充颜色,如下所示:

polygon.mystar {
    fill: blue;
}​

circle.mycircle {
    fill: green;
}

这很好用,但是我正在寻找一种方法来修改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,然后在某个url上提供它。

然后在CSS中使用这个url。

因为作为背景IMG,它不是DOM的一部分,不能操作它。另一种可能是定期使用它,以正常的方式将其嵌入到页面中,但绝对定位它,使其完全宽度和页面的高度,然后使用z索引CSS属性将其放在页面上的所有其他DOM元素后面。

用户回答回答于

我需要一些类似的东西,我想坚持使用CSS。这里有更少和SCSS混合以及普通的CSS,可以帮助这一点。不幸的是,它的浏览器支持有点松懈。

.element-color(@color) {
  background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="@{color}" ... /></g></svg>');
}

减:

.element-color(#fff);

SCSS混音:

@mixin element-color($color) {
  background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="#{$color}" ... /></g></svg>');
}

SCSS使用情况:

@include element-color(#fff);

CSS:

// color: red
background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="red" ... /></g></svg>');

将完整的SVG代码嵌入到CSS文件中。它还提到了浏览器兼容性,这是一个太小,这是一个可行的选择。

扫码关注云+社区