Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why does my CSS mask code not work in Firefox?

Tags:

css

firefox

mask

I want to make a mask on an image.

It's working fine in Chrome, so I must be doing something right.

This is the code:

<style type="text/css">
  .element {
    width: 250px;
    height: 250px;
    overflow: hidden;
    color: #fff;
    background: url(images/film.png);
    mask:url(images/cat.svg);
    -webkit-mask-image: url(images/cat.svg);
  }
</style>
</head>

<body>
  <div class="element">
  </div><img src="images/cat.svg" width="250" height="250" />
</body>

Viewable here: kindervakantiepas.nl/mask/mask.html

Why is it not working in Firefox?

like image 803
Wouter Berkes Avatar asked Dec 26 '22 08:12

Wouter Berkes


1 Answers

The problem is the svg itself. You didn't define a mask. I had a simular problem in another project and came up with an svg like this. You'll find a working example here:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
    <!ENTITY ns_svg "http://www.w3.org/2000/svg">
    <!ENTITY ns_xlink "http://www.w3.org/1999/xlink">
]>
<svg xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" width="313.204" height="377.418" viewBox="0 0 313.204 377.418" >
<defs>
    <mask id="maskid" maskUnits="objectBoundingBox">
    <polygon stroke="#FFFFFF" fill="#FFFFFF" stroke-miterlimit="10" points="56.609,171.248 116.609,207.586 189.849,165.896 182.243,136.037 
    174.638,108.994 208.159,98.854 209.849,74.628 189.567,59.698 200.553,38.008 181.116,58.572 163.651,56.037 154.074,32.938 
    156.328,54.064 148.722,59.98 148.44,83.642 118.018,92.375 78.863,111.248 69.286,144.769 50.13,86.177 "/>
    </mask>
</defs>
<g>
<polygon stroke="#FFFFFF" stroke-miterlimit="10" points="56.609,171.248 116.609,207.586 189.849,165.896 182.243,136.037 
    174.638,108.994 208.159,98.854 209.849,74.628 189.567,59.698 200.553,38.008 181.116,58.572 163.651,56.037 154.074,32.938 
    156.328,54.064 148.722,59.98 148.44,83.642 118.018,92.375 78.863,111.248 69.286,144.769 50.13,86.177 "/>
</g>
</svg>

For FF you use the mask via the id reference (in this example: maskid):

And in CSS:

.element {
    background: url("images/film.png") repeat scroll 0 0 transparent;
    color: #FFFFFF;
    height: 250px;
    overflow: hidden;
    width: 250px;
    mask: url("images/cat.svg#maskid");
    -webkit-mask-image: url(images/cat.svg);
}
like image 166
axel.michel Avatar answered Dec 28 '22 20:12

axel.michel