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

【问题标题】：SVG Image Mask Not Working In Firefox or IESVG 图像蒙版在 Firefox 或 IE 中不起作用
【发布时间】：2013-04-25 14:40:09
【问题描述】：

我很容易用 PNG（黑色圆圈，透明背景）制作了一个蒙版，并在 chrome 等浏览器中使用了 -webkit-mask-image:url(images/mask.png)。但是我在使用 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>

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

【问题讨论】：

好的，我让它工作了，但它似乎将图像移动到某个随机位置
好的，已经排序了。工作在 FF 但不是 IE...

标签： css svg xhtml

【解决方案1】：

根据http://www.w3.org/TR/SVG/propidx.html，您可以对container elements 和graphics elements 应用掩码。不幸的是，<foreignObject> 不在这两个列表中，因此该元素的正确渲染是忽略 mask 属性。因此 IE 和 Firefox 对这个例子的渲染是正确的。

【讨论】：

我认为将 mask/clip-path/filter 应用于 foreignObject 也是有意义的。请注意，IE 不支持 foreignObject（至少我上次尝试时不支持）。 Firefox 似乎确实处理了 foreignObject 上的 'filter' 属性（小提琴：jsfiddle.net/UYZW9），并且 'filter' 适用于与 'mask' 相同的元素（容器和图形元素）。无论如何，我认为所有这些属性都被扩展为适用于“所有”元素。

【解决方案2】：

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

http://thenittygritty.co/css-masking

【讨论】：

【解决方案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>

【讨论】：