图像/ SVG更改颜色？

Question

---

因此，我一直在开发某些东西，并决定使用SVG。 但是，我的应用程序有多个主题，是否可以通过CSS将SVG的颜色（例如白色）更改为黑色？ 我不在考虑过滤，因为无法应用，因此整个图像就像纯红色。 例如，我有一个带有白色图标的图像，是否为svg。 但我要改用红色图标。 反正有这样做吗？ 我宁愿不使用内嵌svg，因为它会使自定义复杂化。 如果您需要任何澄清，请通知我。 提前致谢

编辑：一些额外的代码：

<img class="fullscreen" src="assets/icons/ic_fullscreen.svg" />

编辑： JSFiddle： http : //jsfiddle.net/MashedPotatoes/s2gs3t16/1/

Answer 1

几个月前，我实际上遇到了同样的问题。 最终，我写了一些东西，为我们提供了我们都在寻找的东西-使用相同的SVG，并使用CSS更改其颜色。 这个想法是，您可以通过<object>创建它，然后对其内容进行一些DOM操作，以将其替换为<div> ，从而提供对内容的访问。

我在这里写了一篇有关该过程的小文章-您可以看到解决方案并满足您的需求。 另外-该代码是AngularJS中的指令，因此它可能不适合您，但是想法是相同的，您可以将其使用并在Javascript / Jquery中使用它。

如果您使用的是Angular：

您可以使用ngReusableSvg这个组件。

Answer 2

您无法动态更改背景SVG的颜色。 但是在大多数情况下，您可以使用SVG作为“遮罩”来更改容器的背景颜色。

clip-path: url(#clipping) http://codepen.io/yoksel/full/fsdbu/