Clear an already set "fill" property in CSS to get defaults back for an SVG-CodePudding

I'm using a platform that within it's own CSS it sets the fill property as so:

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

This ends up with an SVG I am adding being black in this instance - which is not helpful. This particular SVG is a multi-colored SVG and handles all the fill properties itself within the code of the SVG.

Obviously if I change this property to aother color, it colors the whole SVG that color - so that is not helpful either.

So my question is, how do I get the defaults back so it doesn't apply any color to it? Setting it to initial makes the SVG transparent.

CodePudding user response：

The keyword that would help in this situation is revert-layer. Unfortunately, it is currently only implemented in Firefox (>= 97).

(This example will seem to work even for other browsers. But that is because for them, it is an invalid keyword.)

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

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