Question

我很容易制作一个带有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>

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

Answer 1

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

Answer 2

因为IE不理解“外来”对象，你必须使用javascript解决它并检查你是否可以支持它，如果是这样的话，请注入它，如果不能避免它。那么你必须使用IE的内置滤色器来专门为IE创建自己的抠像效果。下面的这个网站向您展示了如何使用示例。

http://thenittygritty.co/css-masking

Answer 3

您可以像这样重写您的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>

SVG图像蒙版在Firefox或IE中不起作用

3 个答案: