IE10 blur()滤镜兼容？

Question

实现一个让图片背景模糊的效果，主要使用filter,做了几个浏览器的兼容处理，

CSS:
.all-blur{
     -webkit-filter: blur(3px); 
     -moz-filter: blur(3px);
     -ms-filter: blur(3px); 
     -o-filter: blur(3px);
     filter: blur(3px);
     filter: url(blur.svg#blur); /* IE10 */  
     filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');/* IE6~IE9 */
}

html
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="0" width="0">
  <defs>
     <filter id="blur" x="0" y="0">
       <feGaussianBlur stdDeviation="3" />
     </filter>
  </defs>
</svg>  
<img class="all-blur" src="https://www.baidu.com/img/bd_logo1.png" />

其他浏览器正常，但在IE10中无法实现？不知道是不是我浏览器有问题?在网上找的别的关于IE10,blur的兼容，用我电脑上的浏览器打开也是没有效果的,根据查到的文档IE10是支持svg,很多兼容的处理方案都提到使用svg，但我本机IE10打开就是没有作用，是哪里不对吗？

网上一个例子：
http://jsbin.com/fomeruwuqa/1/edit?html,css,output

Answer 1

不知道为什么在CSS里面引用滤镜没有效果，但换成另外一种写法就可以了；

<svg width="100%" height="570"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <filter id="blurMe">
    <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
  </filter>
  <image filter="url(#blurMe)" x="100" y="100" width="100%" height="570" xlink:href="https://mdn.mozillademos.org/files/3712/Test_Form_3.jpeg" alt="">
</svg> 

上面这种写法是有效的，可以写在文档里面加IE的判断

<!--[if IE 10]>
    <svg width="100%" height="570"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <filter id="blurMe">
    <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
  </filter>
  <image filter="url(#blurMe)" x="100" y="100" width="100%" height="570" xlink:href="https://mdn.mozillademos.org/files/3712/Test_Form_3.jpeg" alt="">
</svg> 
<![endif]-->

但是如果图片不是固定的，需要动态更换，就要用js先判断浏览器版本再插入svg，因为js识别不到文档中ifendif语句内的元素;

参考：
https://developer.mozilla.org/en-US/docs/Web/CSS/filter
https://www.w3.org/TR/filter-effects-1/
https://blogs.msdn.microsoft.com/ie/2011/10/14/svg-filter-effects-in-ie10/