背景图片 SVG 中的 currentColor

Question

我有一张嵌入式SVG图像，我将其用作背景，以下是一个简化的示例：

div {
  width: 100%; height: 500px;
  color: green;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><path d='M0 0 H 100 V 100 H 0 Z' fill='currentColor'></path></svg>");
}

问题在于图片没有继承currentColor， 而当我期望它是绿色时它是黑色的。有什么想法吗？

https://jsfiddle.net/wjqkL07p/3/

- sdvnksv

---

因为使用 url() 时，即使情况并非如此，也会获取外部资源，所以无法在 SVG 中使用当前 CSS 颜色。 - Temani Afif

这并不容易做到。这里有一些可行的方法：https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images - Peter Collingridge

@TemaniAfif，我重新打开了这个问题，因为问题与你标记为重复的那些问题是不同的，即使其中一个问题中提到的解决方法（使用不同的方法来着色SVG）是必需的。我建议你将上面的评论转化为这个问题的更完整的答案！ - Zach Saucier

@ZachSaucier 我的评论已经是重复问题中的一个答案了...这就是我将其关闭为重复的原因。 - Temani Afif

Answer 1

这不会按照你的期望工作，因为使用 url() 会使 SVG 被视为外部资源，即使它并不完全是这种情况。所以当 SVG 是背景图像时，没有办法在其中使用 CSS 的 currentColor。

对于这种特定情况，您可以使用蒙版并使用 background-color 来更新颜色。确保用非透明颜色填充您的 SVG。

div {
  height: 300px;
  background-color: green;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><path d='M0 0 H 80 V 100 H 0 Z' fill='black'></path></svg>");
}

<div></div>

- Temani Afif