CSS - Использование SVG маски не будут правильно отображаться в Firefox

Question

У меня есть следующий HTML-

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

и вот 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; 
} 

Но в Firefox появляется, как с левой стороны образ, где, как и в Safari, Chrome и т.д. кажется, правильно, так как на правой стороне: -

Любая идея, что мне не хватает?

Маска и маску webkit игнорируются в Firefox.

Answer 1

Может быть, это не поддерживается в соответствии с http://caniuse.com/#feat=css-masks

Согласно MDN, вы можете просто использовать маску для Firefox, как и в Firefox 3.5:

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

Однако маска требует SVG изображение в качестве маски. Возможно, вы можете кодировать изображение SVG на базе-64 в таблицу стилей или использовать файл изображения SVG.