'Inverting the mask property behind an SVG with css [closed]

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 not show anything that isn't behind the svg, How can i have that happen the other way?

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

csssvgcss-mask


Solution 1:[1]

mask-composite is what you are looking form but you need the perfixed version from chrome.

Example:

.box {
  width: 100px;
  height: 100px;
  display:inline-block;
  background: red;
}

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

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

body {
  background:#f3f3f3;
}
<div class="box normal"></div>

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions