1

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

4

2 回答 2

3

您已将 XML 过滤器关闭标记编写</filter>为<filter>另一个打开标记。你所需要的只是倒数第二行的一个字符变化......

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <filter id="blur">
      <feGaussianBlur stdDeviation="1"/>
    </filter>
</svg>
于 2013-06-18T19:22:41.053 回答
0

你有两个错误：

  1. 过滤器的网址
  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');
}
于 2013-06-18T18:58:48.340 回答