Nafiul Islam Nafiul Islam - 4 months ago 40
CSS Question

CSS Mask not working on firefox

I'm trying to show a SVG image using mask but in Firefox it isn't appearing. My CSS class is as follows:

.myClass {
-webkit-mask: url('../img/arrow-down.svg') no-repeat 100% 100%;
mask: url('../img/arrow-down.svg') no-repeat 100% 100%;
background: rgba(67, 67, 67, 0.8);
width: 1.15em;
height: 1em;
}


And html code is just a simple:

<div class="myClass"></div>


In chrome, my masked arrow-down.svg is showing nicely but in firefox a div with specified background is appearing. Any idea on how to solve my problem?

Answer

mask: url('../img/arrow-down.svg') no-repeat 100% 100%;

is invalid. You can't have a mask that's an entire SVG file, it must have a fragment identifier that points to a mask element.

Additionally Firefox currently doesn't support any additional parameters beyond the url so the no-repeat 100% 100% will cause it to fail.

So for Firefox what you need is something like this:

mask: url('../img/arrow-down.svg#maskelement') 

where maskelement would be the id of a <mask> element within the arrow-down.svg file.