我想在图像上制作一个面具.
它在Chrome中运行良好,所以我必须做正确的事情.
这是代码:
<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>
可在此查看:kindervakantiepas.nl/mask/mask.html
为什么它不适用于Firefox？
axe*_*hel 10
问题是svg本身.你没有定义一个面具.我在另一个项目中有一个类似的问题,并想出了这样的svg.你会在这里找到一个有效的例子:
<?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>
对于FF,您可以通过id引用使用掩码(在此示例中为:maskid):
在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);
}