css - Opera 和 IE (Window/Linux) 中的过滤器 :blur. svg 不起作用

Question

我遵循了很多教程和 stackoverflow 问题，它们基本上都说了同样的事情，但对我来说仍然没有用(不要在 IE 和 FF/Opera 中显示任何模糊效果或 Windows 和 Linux 的任何效果)

这是我的 CSS:

-webkit-filter: blur(20px);
-moz-filter: blur(15px);
-o-filter: blur(15px);
-ms-filter: blur(15px);
filter: url(#effect-blur-1);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'effect-blur-1\'><feGaussianBlur stdDeviation=\'15\' /></filter></svg>#effect-blur-1");
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3'); 

我已经尝试将 svg 放在外部文件中。也没有积极的结果。 即使使用这个:

filter:blur(add = 0, direction = 300, strength = 10);

但仍然没有。

谁知道我哪里错了？

Answer 1

IE10/11 不支持对 html 内容应用过滤器，仅支持 SVG 内容，因此您的图像必须是 SVG <image>元素而不是 html <img>元素。

此外，IE 似乎不支持数据 URL 过滤器，至少我无法让它工作，所以我们只剩下这个似乎在 IE11 和 Firefox 上工作，也可能在 webkit 上工作......

<header>
      <div>
        <div>
            <svg width="650" height="400">
            <image width="650" height="400" xlink:href="http://www.insidefacebook.com/wp-content/uploads/2013/09/iOS7update.jpg" filter="url(#blur)" />
    <filter id="blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
    </filter>
            </svg>
        </div>
      </div>
</header>

或作为 jsfiddle