Question

我想通过内容属性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标签上设置不同<rect>属性的三个不同SVG文件（或数据URI）来实现此目的，但我想知道是否有办法让我这样做通过我的HTML中的CSS？

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

我看过this answer，这不是我想要的。他们建议在整个页面中嵌入SVG，如果可能的话，我宁愿通过CSS content来做这件事。有什么想法吗？我运气不好吗？

Answer 1

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

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

Answer 2

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

来自@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

Answer 3

您可以使用SVG Image Editor工具编辑前端的颜色并复制代码并将其用于您想要放置的位置，这需要很短的时间段。尝试一定会有效

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

3 个答案: