将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>

当前回答

这是我最喜欢的方法,但是您的浏览器支持必须非常先进。使用mask属性可以创建应用于元素的掩码。任何地方的掩模是不透明的,或固体,底层的图像显示通过。在它是透明的地方,底层图像被掩盖或隐藏。CSS mask-image的语法类似于background-image。看看这个相互依赖的掩码

其他回答

在某些(非常特定的)情况下,这可以通过使用过滤器来实现。例如,您可以通过使用过滤器将色调旋转45度将蓝色SVG图像更改为紫色:hue-rotate(45deg);。浏览器支持很少,但它仍然是一项有趣的技术。

Demo

实现这一点的一种方法是从某种服务器端机制提供svg。 只需创建一个资源服务器端,根据GET参数输出svg,并在某个url上提供它。

然后在css中使用这个url。

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

如果你试图使用和SVG直接在CSS与url()像这样;

a:before {
  content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 451 451"><path d="M345.441,2...

您应该将#编码为%23,否则它将不起作用。

<svg fill="%23FFF" ...

我需要一些类似的东西,并想坚持使用CSS。这里有LESS和SCSS mixins以及普通的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文件中的信息。它还提到浏览器兼容性有点太小,这是一个可行的选择。

以文本形式下载svg。

使用javascript修改svg文本来更改绘制/描边/填充颜色[s]。

然后将修改后的svg字符串内联嵌入到您的css中。