设置内联 SVG 的填充颜色 [重复]

Posted 2023-03-06

【中文标题】设置内联 SVG 的填充颜色 [重复]

【英文标题】：Set fill color of inline SVG [duplicate]

【发布时间】：2020-06-06 00:25:00

【问题描述】：

是否可以使用纯 CSS（无 JS）设置内联 SVG 的填充颜色？

我有一个包含一些内容的元素，我需要

将内容重置为简单的 SVG 图像（基本上是字形） 动态重置该 SCG 的填充颜色（不是作为 SVG 的内联属性，因为该颜色来自 CSS 变量）

div 
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 10.586l5.293-5.293a1 1 0 011.414 1.414L13.414 12l5.293 5.293a1 1 0 01-1.414 1.414L12 13.414l-5.293 5.293a1 1 0 11-1.414-1.414L10.586 12 5.293 6.707a1 1 0 011.414-1.414L12 10.586z'/%3E%3C/svg%3E");

<div>Hello World<div>

现在可以把这个图标变成红色吗？

【问题讨论】：

请提供minimal reproducible example

你也可以添加你的html代码

如果你的 SVG 有一个 id 或 class 分配给它，你可以简单地在你的 CSS 中添加一个规则，比如#mySVG fill: 'any-color-you-like'

只有使用<svg> 元素将样式直接嵌入到文档中时，才能应用样式。在这方面，其他所有内容都不受限制 - <img>、iframe、对象、使用 background/content 将其设置为另一个元素的内容等 - 您可以不的所有情况在您的主文档样式表中对其进行格式化。

伤心。不是有一些花哨的 CSS 过滤器魔术吗？

【参考方案1】：

您可以使用 css 中的 filter 属性来操作内联 svg 的颜色。 https://jsfiddle.net/cq9gm0jn/

div 
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 10.586l5.293-5.293a1 1 0 011.414 1.414L13.414 12l5.293 5.293a1 1 0 01-1.414 1.414L12 13.414l-5.293 5.293a1 1 0 11-1.414-1.414L10.586 12 5.293 6.707a1 1 0 011.414-1.414L12 10.586z'/%3E%3C/svg%3E");

div.red 
  filter: invert(50%)sepia(100%)saturate(10000%)

<div class="red">Hello World</div>
<div>Hello World</div>