CSS: Inverting what area is hidden by SVG's mask-property

Question

I have an SVG and using a mask with a background color to show the SVG, Is there any property that i can use to invert the mask? eg. Normally the SVG-mask will hide anything that isn't already behind the SVG-content, How can I have that happen the other way around?

I would have thought that mask-composite would be the property to use here however it is not being recognised by the browser (Chrome)

Answer 1

mask-composite is what you are looking for

Example:

.box {
  width: 100px;
  aspect-ratio: 1;
  display: inline-block;
  background: red;
}

.normal {
  mask: url(https://i.ibb.co/FzmCjLL/Jqtz.png) center/contain no-repeat;
}

.inverted {
  mask: 
    url(https://i.ibb.co/FzmCjLL/Jqtz.png) center/contain no-repeat,
    linear-gradient(#000 0 0); /* we need this extra layer for mask-composite */
  mask-composite: exclude;
}

body {
  background:#f3f3f3;
}

<div class="box normal"></div>

<div class="box inverted"></div>