Question

是否可以使用纯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>

现在可以将该图标设为红色吗？

Answer 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>

设置嵌入式SVG的填充颜色

1 个答案: