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

Question

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

将SVG输出直接放在页面代码中，我可以简单地用CSS修改填充颜色，如下所示：

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

这很好用，但是当SVG作为背景图像时，我正在寻找一种修改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>

Answer 1

这样做的一种方法是从服务器端机制为SVG提供服务。只需创建一个资源服务器端，根据GET参数输出SVG，然后在特定的url上提供它。然后，您只需在CSS中使用该url即可。因为作为背景IMG，它不是DOM的一部分，您不能操作它。另一种可能是定期使用它，以正常的方式将其嵌入到页面中，但绝对定位它，使其完全宽度和页面的高度，然后使用z索引CSS属性将其放在页面上的所有其他DOM元素后面。

Answer 2

我需要一些类似的东西，我想坚持使用CSS。这里有更少和SCSS混合，以及普通的CSS，可以帮助您这一点。不幸的是，它的浏览器支持有点松懈。有关浏览器支持的详细信息，请参阅下面。减去混合蛋白：.element-color(@color)&nbsp;{ &nbsp;&nbsp;background-image:&nbsp;url('data:image/svg+xml;utf8,<svg&nbsp;...><g&nbsp;stroke="@{color}"&nbsp;...&nbsp;/></g></svg>');}减：.element-color(#fff);SCSS混音：@mixin&nbsp;element-color($color)&nbsp;{ &nbsp;&nbsp;background-image:&nbsp;url('data:image/svg+xml;utf8,<svg&nbsp;...><g&nbsp;stroke="#{$color}"&nbsp;...&nbsp;/></g></svg>');}SCSS使用情况：@include&nbsp;element-color(#fff);CSS：//&nbsp;color:&nbsp;redbackground-image:&nbsp;url('data:image/svg+xml;utf8,<svg&nbsp;...><g&nbsp;stroke="red"&nbsp;...&nbsp;/></g></svg>');这是更多的信息将完整的SVG代码嵌入到CSS文件中。它还提到了浏览器兼容性，这是一个太小，这是一个可行的选择。