Question

我正在尝试使用blur 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等所有可能的组合，但没有解决问题。

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

你有两个错误：

过滤网址
过滤器前面的名称空间

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');
}

svg模糊过滤器在Firefox中无效

2 个答案: