Menu
The SVG mask works fine in Chrome but Firefox.
So I found another way to solve it.
But when I use the base tag like <base href="/" /> , the image tag <image width="165px" height="150px" xlink:href="mask.png" filter="url(#maskfilter)" /> is not working.
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 doesn't work even I use absolute link.
930
Came upon the same problem. Seems like bug 652991.
<base> creates no problems really, it's just this specific case.
101
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:
<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 turned 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 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.
Working Example (test on FF)
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
