SVG模糊滤镜

<defs> 和 <filter>

所有的SVG滤镜元素都需要定义在 <defs> 标记内。这个 <defs> 标记是 definitions 这个单词的缩写，可以包含很多种其它标签，包括各种滤镜。

<filter> 标记用来定义SVG滤镜。 <filter> 标记需要一个id属性，它是这个过滤器的标志。SVG图形使用这个id来引用滤镜。

SVG <feGaussianBlur>

例 1

这个 <feGaussianBlur> 标记能给SVG图形带来模糊效果：

上面的SVG图片使用了下面的代码：

<svg height="110" width="110">

  <defs>

    <filter id="f1" x="0" y="0">

      <feGaussianBlur in="SourceGraphic" stdDeviation="15" 
/>

    </filter>

  </defs>

  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />

</svg>

代码说明：

• id属性定义了这个滤镜的唯一标志
• 使用<feGaussianBlur>标记定义模糊效果
• in="SourceGraphic"属性指明了模糊效果要应用于整个图片
• stdDeviation属性定义了模糊的程度
• <rect>标记内的filter属性里引用了过滤器“f1”

例 2

下面是两个SVG圆形，右边的一样使用了模糊特效：

上面的SVG图片使用了下面的代码：

<svg width="230" height="120"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">

  <filter id="blurMe">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
  </filter>

  <circle cx="60"  cy="60" r="50" fill="green" />

  <circle cx="170" cy="60" r="50" fill="green"
          filter="url(#blurMe)" />
</svg>