Estou realizando um projeto onde devo aplicar uma máscara(PNG ou SVG) sobre uma imagem < img >.
Estou utilizando
.svg-clipped {
mask-image: url("../img/desktop_tds_hist.png") ;
-webkit-mask-image: url("../img/desktop_tds_hist.png") ;
-webkit-mask-image: url("../img/desktop_tds_hist.png");
-o-mask-image: url("../img/desktop_tds_hist.png");
-moz-mask-image: url("../img/desktop_tds_hist.png");
-webkit-mask-size: 100% 100%;
}
Porém esta função só trabalha no Google Chrome.
Existe alguma solução alternativa? Pois já procurei diversas e não encontrei nenhuma que solucionasse meu problema.