如何在 CSS 内容属性中更改 SVG 图像的颜色？答案

【问题标题】：How do I change the colour of an SVG image in a CSS content property?如何在 CSS 内容属性中更改 SVG 图像的颜色？
【发布时间】：2013-05-22 19:21:25
【问题描述】：

我想通过内容属性bootstrap-style 将 SVG 图像用作 CSS 精灵，如下所示：

i.rectangle-image {
  content: url(rectangle.svg);
}

这是我的 SVG：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <rect x="10" y="10" width="80" height="80"/>
</svg>

和建议的 HTML：

<div><i class="rectangle-image"></i> Hello, world!</div>

我希望能够在我的应用程序中重新着色 SVG，例如让图标在某些位置显示为紫色，而在其他位置显示为白色。我知道我可以通过在fill 标签上设置不同的fill 属性的三个不同的SVG 文件（或数据URI）来实现这一点，但我想知道是否有办法通过我的CSS 来做到这一点HTML？

我尝试将fill 属性添加到i.rectangle-image 选择器，但这不起作用。

我查看了this answer，但这并不是我想要的。他们建议在整个页面中嵌入 SVG，如果可能的话，我更愿意通过 CSS content 做到这一点。有什么想法吗？我运气不好？

【问题讨论】：

Is this something you're looking for?

标签： css svg

【解决方案1】：

如果您使用 CSS 内容工具，您基本上将 SVG 数据加载为图像。出于隐私原因，您不能使用外部 CSS 或 javascript 影响图像的显示方式。

如果您想更改 SVG 数据的内容，您要么必须通过 <object> 或 <iframe> 标记加载它，要么将其内嵌在 HTML 文件中。

【讨论】：

谢谢。你完全正确。我最终创建了一个自定义网络字体来处理它。
@Jonathan 谢谢你的建议。像魅力一样工作:)！

【解决方案2】：

如何赋予 SVG 透明度并使用 css 背景色填充背景？

@MMM 建议的解决方案看起来很棒：

<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="13px" height="12.917px" viewBox="0 0 13 12.917" enable-background="new 0 0 13 12.917" xml:space="preserve">
       <polygon fill="#000000" points="6.504,0 8.509,4.068 13,4.722 9.755,7.887 10.512,12.357 6.504,10.246 2.484,12.357 3.251,7.887 0,4.722 4.492,4.068 "/>
       <script>
         document.getElementsByTagName("polygon")[0].setAttribute("fill", location.hash);
       </script>
</svg>

http://jsbin.com/usaruz/2/edit

http://codepen.io/Elbone/pen/fHCjs

【讨论】：

【解决方案3】：

您可以使用SVG Image Editor工具在前端编辑颜色并复制代码并在您想要放置的地方使用它，这需要很短的时间..尝试一下肯定会成功

【讨论】：

操作需要动态控制 SVG 样式，所以这行不通。