用于 IE 中的图像遮罩的 SVG答案

【问题标题】：SVG For Image Masking In IE用于 IE 中的图像遮罩的 SVG
【发布时间】：2013-04-25 15:37:37
【问题描述】：

我在这里使用 IE 10，firefox 工作正常，但 IE 中没有显示掩码

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

【问题讨论】：

SVG Image Mask Not Working In Firefox or IE 的可能重复项
非常相似，但其中一个掩码应用于foreignObject，另一个应用于HTML img 元素。前者应该在 IE 中工作，但不能在 IE 中工作。
在 ie 中都不工作。前者使用foreignObject在IE中显示完全空白页面

标签： html css internet-explorer svg mask

【解决方案1】：

目前只有 Firefox 支持applying a mask directly to an HTML element。其他 UA 仅允许您在 SVG 对象上设置 SVG 效果，例如蒙版。

如果您希望它在 IE 中工作，则必须使用 SVG <image> 元素而不是 HTML <img> 元素来显示图像。

【讨论】：

那么有没有人知道如何在 FF 和 IE 中进行这项工作？
这是你的另一个问题。我已经回答了这个问题。