使用CSS或Javascript动态设置（非内联）SVG的样式

在我参与的项目中，我们使用SVG作为图标。我们的大多数图标都需要第二个版本，其中颜色是反转的（例如蓝色图标代表白色背景，白色图标代表蓝色背景）

我们在CSS中使用

背景图像

包含图标

我想知道是否有一种方法可以让每个图标只有一个文件，并使用CSS或Javascript来改变它的颜色。这样我们就可以少提要求了

现在，我知道使用CSS在内联SVG图像上设置属性是可行的，但我并不真的想内联所有的图标

有办法做到这一点吗

我有一个例子，其中SVG包括三种不同的方式。内联、CSS背景和

img

标记。有一个CSS规则设置

fill

属性，并且只命中内联SVG。还有一个小Javascript片段，它试图找到所有的圆圈并给它们上色。有趣的是，当通过CSS已经设置了

fill

时，直接在内联SVG上设置

fill

是不起作用的

似乎

document.querySelectorAll

只能找到内联的SVG，我想这是有意义的。严格来说，其他两个不是DOM的一部分

---

现在，有什么方法可以在不更改

circle.svg

文件的情况下覆盖最后两个圆的

fill

？有没有其他技巧可以用来用两种不同的颜色显示

circle.svg

文件？

如果您想采用不同的方法来解决问题，可以使用从svg图像生成的图标字体，并将文本颜色设置为白色、蓝色或任何其他颜色。浏览器必须支持自定义字体（@font-face），但我认为大多数支持SVG图像的浏览器都会支持这一点

有几种不同的服务可以让您创建自己的字体，如：或

---

例如：Bootstrap使用图标字体的子集作为图标：

基本上，CSS只能为实际元素（和伪元素）设置样式。如果你的SVG不在DOM中，那么你就是索尔。这也是我所怀疑的，但是互联网以前让我很惊讶。我们的设计师刚刚抛弃了“反转”所有SVG的想法，基本上将它们用作CSS样式背景上的透明遮罩，但我认为我们不会采用这种方式……您可以使用javascript将CSS注入SVG。您可能不喜欢那个解决方案。@BigBadaboom我该如何注入CSS？我找不到带有

document.querySelector

的SVG。如果你想注入CSS服务器端，那么我仍然会对每个图标执行两个请求。你不能对图像执行。您需要切换到使用

。请参阅或编写脚本将SVG加载到DOM中，修改它，然后将其转换为数据URL，并将其设置为背景。这两种解决方案都有点难看，所以我说你可能不喜欢作为一个基本概念，这很好，但图标字体不能让您控制SVG的各个“部分”，这似乎是必要的。此外，浏览器仍将其视为文本，可能会对图像进行反锯齿处理，使其模糊。@Paulie_的观点很好，它只适用于单一颜色的图标