Is there a Gecko equivalent to -webkit-mask or a fancy way of degrading for Gecko browsers?

Question

I\'m looking for a solid answer on whether or not there is an equivalent to -webkit-mask in Gecko browsers/Firefox?

If not, is there any way of degrading -webkit-mas

Answer 1

Here is the trick , you need to convert all points generated in your svg file to ratio that is equal the point path divided by mask dimension .

For easier explaination , i have made a quick tool to help designers convert their svg into a mask that is compatible with firefox , you can see a live demo on my website ( http://www.prollygeek.com ) , for example the facebook logo , and twitter logo are just masks , and here is the tool that you can use to convert your svg to a mask: http://prollygeek.com/svg-mask/

for example:

will be turned to:

Please dont forget to add this attribute style="fill-rule:evenodd;clip-rule:evenodd;fill:#ffffff;"

and fill with any color , it doesnt matter.

afterwards link your mask to the css element you desire:

for example:

  mask:url(images/fb.svg#fb);

the calculator is free to use , but please dont copy or publish anywhere else.