svg模糊过滤器在Firefox中不起作用答案

【问题标题】：svg blur filter not working in firefoxsvg模糊过滤器在Firefox中不起作用
【发布时间】：2013-06-18 18:36:45
【问题描述】：

我正在尝试使用模糊 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 for mozilla firefox not working （这就是我添加 height="0" 的原因）。我已经尝试了命名空间、svg:svg、svg:filter、svg:feGaussianBur 等的所有可能组合，但没有解决问题。

【问题讨论】：

标签： css firefox svg

【解决方案1】：

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

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

【讨论】：

傻我...我已经从中删除了它的编辑...谢谢！
这也正确吗？ .demo {过滤器：url（blur.svg#blur）； }
@GCyrillus 这是因为那是一个名为blur.svg的外部文件。除此之外，它是内联的。

【解决方案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');
}

【讨论】：