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
<path d="M250 150 L150 350 L350 350 Z" style="fill:red;stroke:red;filter:url(#gaussian_blur);"/>
<defs>
<filter id="gaussian_blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="10"/>
</filter>
</defs>
结果如下所示：
2、阴影feOffset，配合feBlend滤镜，该滤镜是将两个图像对象合并在一起。
feOffset须指定属性:in,dx,dy
feBlend指定属性:in,in2,mode(normal | multiply | screen | darken | lighten)
<defs>
<filter id="gaussian_blur" x="0" y="0" width="200%" height="200%">
<feOffset in="SourceGraphic" result="fo" dx="30" dy="30"/>
<feGaussianBlur in="fo" result="fg" stdDeviation="5" />
<feBlend in="SourceGraphic" in2="fg" mode="darken" />
</filter>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>
结果如下：
如果要制作黑色投影，可以将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 + 0
0 1 0 0 0 // G = 0*R + 1*G + 0*B + 0*A + 0
0 0 1 0 0 // B = 0*R + 0*G + 1*B + 0*A + 0
0 0 0 1 0 // A = 0*R + 0*G + 0*B + 1*A + 0
<defs>
<filter id="gaussian_blur" x="0" y="0" width="200%" height="200%">
<feOffset in="SourceGraphic" result="fo" dx="30" dy="30"/>
<feColorMatrix type="matrix" in="fo" result="cm"
values="0 0 0 0 0
0 1 0 0 0
0 0 0 0 0
0 0 0 1 0"/>
<feGaussianBlur in="cm" result="fg" stdDeviation="5" />
<feBlend in="SourceGraphic" in2="fg" mode="normal" />
</filter>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>
去掉红色，结果如下所示：
4、feFlood滤镜，使用flood-color和flood-opacity给指定区域填充颜色以及相应透明度
<defs>
<filter id="gaussian_blur" x="0" y="0" width="200%" height="200%">
<feFlood x="0" y="0" width="100" height="100" flood-color="cornflowerblue" flood-opacity="0.5"/>
</filter>
</defs>
效果如下：
渐变分为线性渐变和放射渐变，SVG中渐变使用linearGradient和radialGradient标签来定义。
线性渐变可被定义为水平、垂直或角形的渐变：
- 当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变
- 当 x1 和 x2 相等，而 y1 和 y2 不同时，可创建垂直渐变
- 当 x1 和 x2 不同，且 y1 和 y2 不同时，可创建角形渐变
- 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 <stop> 标签来规定。offset 属性用来定义渐变的开始和结束位置。
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:blue;
stop-opacity:1"/>
<stop offset="25%" style="stop-color:blue;
stop-opacity:1"/>
<stop offset="50%" style="stop-color:white;
stop-opacity:1"/>
<stop offset="75%" style="stop-color:red;
stop-opacity:1"/>
<stop offset="100%" style="stop-color:yellow;
stop-opacity:1"/>
</linearGradient>
效果如下：
<radialGradient> 用来定义放射性渐变。
cx、cy 和 r 属性定义外圈，而 fx 和 fy 定义内圈 渐变的颜色范围可由两种或多种颜色组成。
每种颜色通过一个 <stop> 标签来规定。offset 属性用来定义渐变的开始和结束位置。
<circle cx="100" cy="100" r="100" style="fill:url(#orange_red)" />
<radialGradient id="orange_red" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:blue;
stop-opacity:1"/>
<stop offset="25%" style="stop-color:blue;
stop-opacity:1"/>
<stop offset="50%" style="stop-color:white;
stop-opacity:1"/>
<stop offset="75%" style="stop-color:red;
stop-opacity:1"/>
<stop offset="100%" style="stop-color:yellow;
stop-opacity:1"/>
</radialGradient>
效果：
