Geek Answers Handbook

SVG mask with basic href in firefox

The SVG mask works fine in Chrome, but Firefox.

So, I found another way to solve it.

But when I use the base tag, for example <base href="/" /> , the image tag <image width="165px" height="150px" xlink:href="mask.png" filter="url(#maskfilter)" /> does not work.

Here is the HTML code.

 <!DOCTYPE html> <head> <base href="/" /> <meta charset="UTF-8" /> <html> <head> <title>mask</title> <style> .masked{ width:300px; height:300px; -webkit-mask-image:url("mask.png"); -webkit-mask-size:cover; mask:url("#svgmask"); background-image:url("masked.jpg"); } </style> </head> <body> <div class="masked"></div> <svg height="0"> <filter id="maskfilter"> <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0" /> </filter> <mask id="svgmask"> <image width="165px" height="150px" xlink:href="mask.png" filter="url(#maskfilter)" /> </mask> </svg> </body> </html>

The image tag does not work, even I use an absolute link.

+7
html css firefox svg
source share
2 answers

Came to the same problem. Looks like error 652991 . <base> does not create any problems, this is this particular case.

+4
source share

Here is the trick, you need to convert all the points created in your svg file to a ratio equal to the point path divided by the size of the mask.

To simplify the explanation, I made a quick tool to help designers convert their svg to a mask 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 a tool that you can use to convert svg to a mask: http://prollygeek.com/svg-mask/

eg:

 <mask id="fb" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"> <path d="M236.626,120.827v27.295h-14.851c-4.416,0-7.225,1.204-8.63,3.612c-1.003,1.604-1.405,4.415-1.405,8.229v12.442h25.287l-3.01,27.494H211.74v79.273h-32.712v-79.273h-16.055v-27.494h16.055v-16.457c0-16.858,5.82-27.695,17.259-32.311 c5.619-2.208,10.436-2.811,15.453-2.811H236.626z"/>

will be rotated to:

 <mask id="fb" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"> <path d="M0.59,0.3v0.0675h-0.035c-0.01,0-0.0175,0.0025-0.02,0.0075c-0.0025,0.0025-0.0025,0.01-0.0025,0.02v0.03h0.0625l-0.0075,0.0675H0.5275v0.1975h-0.08v-0.1975h-0.04v-0.0675h0.04v-0.04c0-0.04,0.0125-0.0675,0.0425-0.08c0.0125-0.005,0.025-0.005,0.0375-0.005H0.59z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#ffffff;"/>

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

and fill with any color, it doesn’t matter.

bind your mask to the css element you want:

eg:

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

The calculator is free to use, but please do not copy or publish anywhere.

Working example (test for FF)

+2
source share

More articles:


All Articles