从人的感官上来讲，图像可以是人们感情的表达。所以人们有时需要图像模糊，图像的浮雕效果。svg中使用滤镜来达到这种效果。svg中有多种滤镜，并且滤镜间还能组合，有些滤镜本身就比较复杂，所以我们分成多章节来讲解svg滤镜，并给出svg滤镜常用的实例。下面我们逐个详解svg中的滤镜

高斯模糊-feGaussianBlur

高斯滤波的原理是根据像素周边的像素值计算当前的像素值，但是每个像素的权重不同，像素权重符合正态分布，这里不研究高斯滤波的公式，我们只要知道大致原理就行了，可以这样简单认为：取像素周边的n*n 个像素计算平均值等到当前像素的色值。属性：

in: SourceGraphic：使用被作用滤镜元素自身的图像输
  SourceAlpha：使用被作用滤镜元素自身的图像输入，r、g、b值不被应用，只是用a(透明度)。

其实还有其他属性，只是有的是浏览器不支持，有的是支持不完全，这里只说这些有用的。减轻大家的思维负担，有兴趣的同学可以查看mdn。
stdDeviation:可以理解为周边像素的个数，如果为1，则表示该像素周边1个像素就是3*3=9个像素，很明显数值越大越模糊。 看下面一个例子：

<svg width="500" height="500">
    <defs>
        <filter id="blurFilter" x="0" y="0">
            <feGaussianBlur in="SourceGraphic" stdDeviation="2"/>
        </filter>
    </defs>
    <polygon filter="url(#blurFilter)" transform="scale(2)" points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
        stroke="green" fill="none" stroke-width="5"/>
</svg>

效果如下：

这种滤镜可以做毛玻璃模糊效果，这种比较常用，我们将会在后面的例子中用到。

图像偏移-feOffset

  这个叫阴影滤镜并不合适，他的效果和平移是一样的，属性dx是x方向的平移量，dy是y方向的平移量。

<svg width="500" height="500">
    <defs>
        <filter id="offsetFilter" x="0" y="0">
            <feOffset in="SourceGraphic" dx="10" dy="10"/>
        </filter>
    </defs>
    <polygon filter="url(#offsetFilter)" transform="scale(2)" points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
        stroke="green" fill="none" stroke-width="5"/>
</svg>

这个滤镜一般和其他滤镜结合使用。

合并滤镜 feMerge,feMergeNode

就是将多个滤镜效果叠加到一起显示。靠下的显示在上面，考上的显示在下面。看下面一个例子：

<svg width="500" height="500">
    <defs>
        <filter id="mergeFilter" x="0" y="0">
            <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"/>
            <feOffset in="blur" dx="4" dy="4" result="offsetBlur" />
            <feMerge>
                <feMergeNode in="offsetBlur"/>
                <feMergeNode in="SourceGraphic"/>
            </feMerge>
        </filter>
    </defs>
    <polygon filter="url(#mergeFilter)" transform="scale(2)" points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
        stroke="green" fill="none" stroke-width="5"/>
</svg>

效果如下：

可以看到滤镜还有个属性result，是这个滤镜的输出结果，可以作为其他滤镜的输入。

结束语

上面是基本的滤镜应用，还记不记得我们上一节说的，科技球的发光效果，下一节我们重点来关注一下svg的feColorMareix滤镜创建发光的效果。敬请关注。