使用CSS或Javascript动态地样式化非内联SVG

Question

我所在的项目使用SVG图标。大多数图标需要有第二个版本，其中颜色被反转（例如白底蓝色图标和蓝底白色图标）。

我们使用CSS中的background-image包含这些图标。

我正在尝试找出是否有一种方法可以只有一个文件来存储每个图标，并使用CSS或Javascript更改其颜色。这将使我们减少请求次数。

现在，我知道使用CSS在内联SVG图像上设置属性是可行的，但我不想内联每个图标。

有没有办法做到这一点？

我有一个Plunker，其中包含三种不同的SVG方式：内联、CSS背景和img标签。有一条CSS规则设置了fill属性，只影响内联SVG。还有一小段Javascript代码片段尝试找到所有圆并对其进行着色。有趣的是，当通过CSS设置fill时，直接在内联SVG上设置fill不起作用。

看来，document.querySelectorAll仅会找到内联SVG，这是有道理的。另外两个严格来说不属于DOM。

现在，是否有任何方法可以覆盖最后两个圆的fill，而不必更改circle.svg文件？是否有其他技巧可以使用以显示具有两种不同颜色的circle.svg文件？

- ivarni

---

基本上，CSS 只能为实际元素（和伪元素）设置样式。如果你的 SVG 不在 DOM 中...那么你就几乎没有办法了。 - Paulie_D

你可以使用JavaScript将CSS注入到SVG中。但是，你可能不喜欢这种解决方案。 - Paul LeBeau

@BigBadaboom 我该如何注入CSS？我用 document.querySelector 找不到SVG。如果您是说要在服务器端注入CSS，那么我仍然需要每个图标进行两个请求。 - ivarni

你不能用图片来做这件事。你需要切换到使用<object>。参见https://dev59.com/8G445IYBdhLWcg3wWY8U#4906603 或者你可以编写一个脚本将SVG加载到DOM中，修改它，然后将其转换为数据URL，并将其设置为背景。这两种解决方案都有点丑陋，所以我说你可能不喜欢它。 :) - Paul LeBeau

没错，那基本上就是在程序中进行内联。你说得对，我不是很喜欢，但还是谢谢你提供链接 :) - ivarni

Answer 1

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

有几种不同的服务可以让您创建自己的字体，例如：http://icomoon.io/ 或者 http://fontastic.me/

例如：Bootstrap使用一个图标字体的子集作为它们的图标：http://getbootstrap.com/components/#glyphicons

- Mathias

---

作为基本想法还可以，但图标字体无法控制SVG的各个“部分”，这似乎是要求。 - Paulie_D

此外，浏览器仍将其视为文本，并可能对图像进行反锯齿处理，使其变得模糊。 - ivarni

@Paulie_D 好观点，这只适用于单色图标。 - Mathias