在IE10中HTML img上的SVG过滤器

Question

我有这个过滤器适用于Chrome和Firefox，但我无法在IE中使用它

http://codepen.io/anon/pen/lwpbo

IE10应该支持SVG过滤器，所以有什么不对吗？

Answer 1

IE目前不支持HTML文档或CSS Filter Effects中的SVG过滤器。它仅支持SVG文档中的SVG过滤器或HTML文档中的SVG片段。如果您希望它在IE中工作，您需要将其从HTML文档转换为SVG文档，将图像包含在SVG片段中，或者将图像包含在SVG文件中并从HTML页面链接到该文件

对于后者，您可以在图像周围创建一个SVG包装器，如下所示：

<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="300"> 

    <filter id="greyscale">
        <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
                                             0.3333 0.3333 0.3333 0 0
                                             0.3333 0.3333 0.3333 0 0
                                             0      0      0      1 0"/>
    </filter>
    <image x="0" y="0" xlink:href="Lenna.jpg " filter="url(#greyscale)" width="300" height="300"/>
</svg>

您可以使用this image

查看此操作

然后从HTML中您需要链接到SVG文件：

<img src="lenna.svg" alt="Lena Söderberg desaturated with SVG" />

如果您愿意，可以直接在HTML文件中包含上面的SVG，而不是使用img元素链接到它。你可以在this jsFiddle demo中看到这种方法。所需的SVG代码完全相同。

IE5.5-IE9支持微软自己的proprietary filters，但在IE10中被删除了。