CODEWITHSUNDEEP
htmlcssfirefoxsvg
Nafiul Islam
Nafiul Islam

Reputation: 1220

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?

Upvotes: 1

Views: 4604

Answers (2)

cmlima
cmlima

Reputation: 539

For anyone who may still be wandering, the following works fine for me, by inserting the encoded svg string as a data uri (not base64!):

.my-class {
  --svg-icon: url('data:image/svg+xml;utf8,...');
  mask: var(--svg-icon) no-repeat;
  mask-size: 100% 100%;
  -webkit-mask: var(--svg-icon) no-repeat;
  -webkit-mask-size: 100% 100%;
  background-color: currentColor;
  height: 1em;
  width: 1em;
}

I was able to pull this off thanks to some nice tutorials/examples by Anthony Fu and Noah Blon:

Upvotes: 0

Robert Longson
Robert Longson

Reputation: 123985

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.

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

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.

Upvotes: 4

Related Questions