以文本形式下载svg。

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

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

下面是另一种解决方案，使用渐变和单色图标作为背景和背景混合模式来着色图标。 它要求背景色是白色的，否则整个背景都会上色。我只在Chrome上进行了测试。

.colored-background { background-image: linear-gradient(45deg, green, green), url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'); background-color: #fff; background-blend-mode: lighten, normal; background-repeat: no-repeat; background-position: center, center right .8em; background-size: auto, 0.6em; color: red; display: inline-flex; align-items: center; padding: 0.5em; padding-right: 2em; height: 1.6em; width: auto; border: 1px solid gray; } .bg { background-color: #ddd; padding: 1em; } <div class="bg"> <div class="colored-background">green icon from black svg</div> </div>

但是，如果您能够直接编辑SVG代码，那么我能够为SVG多边形添加填充颜色，例如下面的SVG呈现红色，而不是默认的黑色。不过我还没有在Chrome之外测试过:

<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="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
    <polygon 


        fill="red"


        fill-rule="evenodd" clip-rule="evenodd" points="452.5,233.85 452.5,264.55 110.15,264.2 250.05,390.3 229.3,413.35 
47.5,250.7 229.3,86.7 250.05,109.75 112.5,233.5 "/>
</svg>

 .icon { 
  width: 48px;
  height: 48px;
  display: inline-block;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%; 
  background-size: cover;
}

.icon-orange { 
  -webkit-filter: hue-rotate(40deg) saturate(0.5) brightness(390%) saturate(4); 
  filter: hue-rotate(40deg) saturate(0.5) brightness(390%) saturate(4); 
}

.icon-yellow {
  -webkit-filter: hue-rotate(70deg) saturate(100);
  filter: hue-rotate(70deg) saturate(100);
}

代码本文章和演示

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

现在你可以像这样在客户端实现这一点:

var green = '3CB54A';
var red = 'ED1F24';
var 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="#'+green+'" 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="#'+red+'" cx="202.028" cy="58.342" r="12.26"/></svg>';      
var encoded = window.btoa(svg);
document.body.style.background = "url(data:image/svg+xml;base64,"+encoded+")";

小提琴!