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

Question

我想通过内容属性 bootstrap-style 使用 SVG 图像作为 CSS Sprite ，像这样:

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 着色，例如让图标在某些位置显示为紫色，在其他位置显示为白色。我知道我可以通过使用三个不同的 SVG 文件(或数据 URI)来实现此目的 fill <rect> 上的属性设置不同标签，但我想知道是否有办法通过 HTML 中的 CSS 来做到这一点？

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

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

Answer 1

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

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