1

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)

Top-Master
  • 7,611
  • 5
  • 39
  • 71
guynumerouno
  • 157
  • 3
  • 14
  • 2
    Could you put an example working snippet up for us to try out. – A Haworth Feb 02 '21 at 15:38
  • Theres no snippet and i cant find an example of one on a site but its pretty common, I may have explained poorly. So you know those circular social icons? i want to invert the background and foreground color of those on hover – guynumerouno Feb 02 '21 at 15:42

1 Answers1

6

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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • Thanks for this answer! This is really cool and helped me. But it won't work in safari, so I used -webkit-mask-composite: xor; instead and that works. – oBo Apr 23 '22 at 15:39
  • @oBo: Use an autoprefixer and all the vendor-specific stuff should be automatically handled by it. With an autoprefixer, only `mask-composite: exclude` needs to be specified. – strarsis Feb 26 '23 at 20:19