0

我很容易用 PNG（黑色圆圈，透明背景）制作了一个蒙版，并-webkit-mask-image:url(images/mask.png)用于 chrome 等浏览器。但是我在使用 SVG 让面具在 Firefox 中显示时遇到了严重的问题

<svg>
    <defs>
        <mask id="mask" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
            <image width="78px" height="78px" xlink:href="images/mask.png"/>
        </mask>
    </defs>
    <foreignObject width="78px" height="78px" style="mask: url(#mask);">
        <img src="images/avatar-sample.jpg" />
    </foreignObject>
</svg>

我真的不明白为什么这不起作用！

4

3 回答 3

0

因为 IE 不理解“外来”对象，所以您必须使用 javascript 解决它并检查您是否可以支持它，如果可以将其注入，如果不能避免它。那么你必须使用 IE 的内置颜色过滤器来创建你自己的专门为 IE 设计的色键效果。下面的这个网站向您展示了如何通过示例进行操作。

http://thenittygritty.co/css-masking

于 2013-07-30T13:41:20.583 回答
0

根据http://www.w3.org/TR/SVG/propidx.html您可以将掩码应用于容器元素和图形元素。不幸<foreignObject>的是，这两个列表都没有，因此该元素的正确呈现是忽略 mask 属性。因此，IE 和 Firefox 在呈现此示例时是正确的。

于 2013-05-01T22:20:29.053 回答
-1

您可以像这样重写您的 svg 以使其在所有支持 svg 的浏览器中工作：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <mask id="mask" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
            <image width="78" height="78" xlink:href="images/mask.png"/>
        </mask>
    </defs>
    <image xlink:href="images/avatar-sample.jpg" width="78" height="78"/>
</svg>
于 2013-08-23T10:46:02.980 回答