CODEWITHSUNDEEP
cssfirefox
nsilva
nsilva

Reputation: 5614

CSS - Using SVG mask not displaying correctly in Firefox

I have the following HTML-

<span class="svg-star svg-finance"></span>

and here is the CSS:-

.svg-star {
    height: 50px;
    width: 50px;
    margin: 2px 5px;
    -webkit-mask:  url(../img/icon-favourite.svg) no-repeat 50% 50%;
    mask: url(../img/icon-favourite.svg) no-repeat 50% 50%;
    display: inline-block;
}
.svg-finance {
    background-color: #CFCABD;
}

But in Firefox it appears as the left side of the image where as in Safari, Chrome etc it appears correctly as per the right side:-

enter image description here

Any idea what I am missing?

The mask and webkit-mask are both ignored in Firefox.

Upvotes: 0

Views: 254

Answers (1)

Nmk
Nmk

Reputation: 1321

May be, It is not supported according to http://caniuse.com/#feat=css-masks

According to MDN, you can just use mask for Firefox, as of Firefox 3.5:

https://developer.mozilla.org/en/CSS/mask

However, mask requires an SVG image to act as the mask. You might be able to base-64 encode your SVG image into your stylesheet, or you can use an SVG image file.

Upvotes: 1

Related Questions