SVG滤镜使用filter标签来定义，该标签必须嵌套在defs元素里面，并且必须指定一个ID，以供引用。
在 SVG 中，可用的滤镜有：
- feBlend
- feColorMatrix
- feComponentTransfer
- feComposite
- feConvolveMatrix
- feDiffuseLighting
- feDisplacementMap
- feFlood
- feGaussianBlur
- feImage
- feMerge
- feMorphology
- feOffset
- feSpecularLighting
- feTile
- feTurbulence
- feDistantLight
- fePointLight
- feSpotLight
1、高斯模糊feGaussianBlur，和css滤镜filter:blur一样，所有的滤镜都需要指定输入in,结果result,以供引用
输入in：SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint
结果如下所示：
2、阴影feOffset，配合feBlend滤镜，该滤镜是将两个图像对象合并在一起。
feOffset须指定属性:in,dx,dy
feBlend指定属性:in,in2,mode(normal | multiply | screen | darken | lighten)
结果如下：
如果要制作黑色投影，可以将feOffset的in输入改成SourceAlpha即可。
3、颜色处理feColorMatrix，使用矩阵来影响颜色的每个通道值(基于RGBA)，需要指定的属性为：in,type(matrix | saturate | hueRotate | luminanceToAlpha),values。
计算规则如下。
1 0 0 0 0 // R = 1*R + 0*G + 0*B + 0*A + 00 1 0 0 0 // G = 0*R + 1*G + 0*B + 0*A + 00 0 1 0 0 // B = 0*R + 0*G + 1*B + 0*A + 00 0 0 1 0 // A = 0*R + 0*G + 0*B + 1*A + 0
去掉红色，结果如下所示：
4、feFlood滤镜，使用flood-color和flood-opacity给指定区域填充颜色以及相应透明度
效果如下：
渐变分为线性渐变和放射渐变，SVG中渐变使用linearGradient和radialGradient标签来定义。
线性渐变可被定义为水平、垂直或角形的渐变：
- 当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变
- 当 x1 和 x2 相等，而 y1 和 y2 不同时，可创建垂直渐变
- 当 x1 和 x2 不同，且 y1 和 y2 不同时，可创建角形渐变
- 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 <stop> 标签来规定。offset 属性用来定义渐变的开始和结束位置。
效果如下：
<radialGradient> 用来定义放射性渐变。
cx、cy 和 r 属性定义外圈，而 fx 和 fy 定义内圈 渐变的颜色范围可由两种或多种颜色组成。
每种颜色通过一个 <stop> 标签来规定。offset 属性用来定义渐变的开始和结束位置。
效果：
