IE10 中 HTML 图片上的 SVG 过滤器

Question

我的过滤器可以在 Chrome 和 Firefox 中使用，但无法在 IE 中使用

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

IE10 应该支持 SVG 滤镜，那么有什么问题吗？

Answer 1

IE 目前不支持 HTML 文档中的 SVG 过滤器或 CSS 滤镜效果. 。它仅支持 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>

您可以通过以下方式查看此操作的实际效果 这个图片

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

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

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

IE5.5–IE9支持微软自家 专有过滤器, ，但这些在 IE10 中被删除了。