SVG模糊滤镜在firefox中不起作用

Question

我正在尝试使用模糊svg滤镜作为外部文件，并通过CSS属性链接它。

我可以用colorMatrix滤镜成功地做到这一点，但是当我把它改成GaussianBlur时，图像就消失了。

HTML和CSS都很简单

<div class="demo">
     <img src="./frost_files/demo.jpg"></img>   
</div>
.demo {
    filter: url(blur.svg#blur);
}

文件blur.svg包含:

<svg version="1.1" height="0" xmlns="http://www.w3.org/2000/svg">
    <filter id="blur">
      <feGaussianBlur stdDeviation="1"/>
    <filter>
</svg>

有效的svg文件包含:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="grey">
<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>
</svg>

我看到了这个答案:filter:blur对于mozilla firefox不起作用(这就是为什么我添加了height="0")。我已经尝试了所有可能的名称空间组合，svg:svg, svg:filter, svg:feGaussianBur等，但没有解决问题。

Answer 1

您已经将XML过滤器关闭标记</filter>编写为<filter>，即另一个打开。您所需要的只是在倒数第二行更改一个字符…

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <filter id="blur">
      <feGaussianBlur stdDeviation="1"/>
    </filter>
</svg>

Answer 2

你有两个错误

1. 到过滤器的url
2. 过滤器前的名称空间

http://codepen.io/gcyrillus/pen/vnlEL

<svg   xmlns="http://www.w3.org/2000/svg">
<filter id="blur1">
        <feGaussianBlur stdDeviation="3"/>
     </filter>
</svg>

.demo{
    filter: url('#blur1');
  float:left;
}
.demo2{
    filter: url('#grey');
}