在用作背景图像时修改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) {
  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: redbackground-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="red" ... /></g></svg>');

---

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