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

Question

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.

Answer 1

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