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

我想通过内容属性中使用SVG图像作为一个CSS精灵，bootstrap-style，就像这样：如何更改CSS内容属性中SVG图像的颜色？

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，例如让图标在某些位置显示为紫色，在其他位置显示为白色。我知道我可以通过在<rect>标记上设置不同的三个不同的SVG文件（或数据URI）来实现此目的，但我想知道是否有方法通过CSS在我的HTML中执行此操作？

我试着给i.rectangle-image选择器添加一个fill属性，但这不起作用。我看过this answer，这不是我想要的。他们建议在整个页面中嵌入SVG，如果可能的话，我宁愿通过CSS content来做到这一点。有什么想法吗？我运气不好吗？

来源

2013-05-03 Jonathan

[这是你的东西你'寻找？]（http://codepen.io/Elbone/pen/fHCjs） – MMM 2013-05-03 11:43:43

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

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

来源

2013-05-03 11:47:14

谢谢你。你完全正确。我最终创建了一个自定义Web字体来处理它。 – Jonathan 2013-06-04 10:30:19

@Jonathan谢谢你的建议。奇迹般有效：）！ – 2016-12-03 11:39:03

怎么样给SVG透明度和使用CSS背景色填充背景？

从@MMM的sugested解决方案看起来不错：

<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

来源

2013-05-03 11:56:17 abimelex

您可以使用SVG Image Editor工具来编辑在前端的颜色和复制代码，并用它在那里你想放置它，这需要很短的时间段..尝试它肯定会工作出

来源

2013-05-22 11:21:25

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

回答

相关问题