背景图像 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>");
}

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

问题是图像没有继承 currentColor 并且在我预期它是绿色时是黑色的。任何的想法？

Answer 1

这不会像您期望的那样工作，因为 usingurl()会使 SVG 被视为外部资源，即使情况并非如此。currentColor因此，当 SVG 是背景图像时，无法在 SVG 中使用 CSS' 。

对于这种特定情况，您可以使用遮罩并使用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>