图像/SVG 改变颜色？答案

【问题标题】：Image/SVG change color?图像/SVG 改变颜色？
【发布时间】：2016-01-16 15:07:48
【问题描述】：

所以我一直在开发一些东西，我决定使用 SVG。但是，我的应用程序有多个主题，无论如何我可以通过 css 将 SVG 的颜色（如白色）更改为黑色吗？我不是在看过滤，因为我无法应用，所以整个图像就像纯红色。例如，我有一个带有白色图标的图像，无论是否为 svg。但我想要一个红色图标。有没有办法做到这一点？我更喜欢不使用内联 svg，因为它会使自定义复杂化。如果您需要任何澄清，请通知我。提前致谢

编辑： 一些额外的代码：

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

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

【问题讨论】：

请把 jsfiddle 发给你
我现在加了一个小提琴
请把 svg 添加到 jsfiddle
我会这样做，但我将不得不使用内联 svg，因为我很难将图像上传到 imgur :)。我很确定你明白了，不过我可以解释一下。
我想澄清一下。我在我的项目中使用了一个 svg 文件，该文件通过 <image> 标签访问。我希望能够更改 svg 的填充颜色。

标签： html css svg

【解决方案1】：

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

我写了一篇关于过程的小帖子here - 你可以看到解决方案并采取你需要的东西。另外 - 代码是 AngularJS 中的指令，所以它可能不适合你，但想法是一样的，你可以在 Javascript/Jquery 中使用它。

如果您使用的是 Angular：

你可以使用这个组件 - ngReusableSvg。

【讨论】：

谢谢！我会看看你的文章。
酷，我很乐意使用它。但是我没有使用角度，而且我也在动态更改图像的来源......你能帮忙吗？

【解决方案2】：

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

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

【讨论】：