清除 CSS 中已设置的“填充”属性以恢复 SVG 的默认值

Question

我使用的平台在它自己的 CSS 中设置属性fill如下：

.tatsu-svg-icon-custom svg * {
    fill: currentColor;
}

最终我在本例中添加的 SVG 是黑色的- 这没有帮助。这个特定的 SVG 是一个多色 SVG，并fill在 SVG 代码中处理所有属性本身。

显然，如果我将此属性更改为另一种颜色，它会将整个 SVG 着色为该颜色 - 所以这也没有帮助。

所以我的问题是，如何恢复默认值，以便它不应用任何颜色？将其设置为initial使 SVG 透明。

Answer 1

在这种情况下有帮助的关键字是revert-layer。不幸的是，它目前仅在 Firefox (>= 97) 中实现。

（这个例子似乎甚至适用于其他浏览器。但那是因为对于他们来说，这是一个无效的关键字。）

.tatsu-svg-icon-custom svg * {
    fill: revert-layer;
}

<div class="tatsu-svg-icon-custom">
  <svg width="100" viewBox="0 0 20 20">
    <circle r="5" cx="5" cy="5" fill="yellow" />
    <circle r="5" cx="5" cy="15" fill="blue" />
    <circle r="5" cx="15" cy="5" fill="red" />
    <circle r="5" cx="15" cy="15" fill="green" />
  </svg>
</div>