概要总结
1、<defs>、<filter>、<feGaussianBlur>标签
2、实现模糊效果
3、\feOffset>、标签
4、实现阴影效果
一、<defs>、<filter>、<feGaussianBlur>标签
1、<filter>标签
给SVG图形添加特殊效果，需要通过filter元素来实现。filter是过滤器的意思，它是一个双标签，filter元素里面包含一个或多个效果滤镜，filter元素有一个必要的id属性，用于识别过滤器，图形通过这个id指向要使用的过滤器。
2、<defs>标签
filter元素都是在defs元素中定义的，defs元素是definitions的简称，它也是一个双标签。
3、<feGaussianBlur>标签
模糊效果可以通过feGaussianBlur滤镜来创建，它是一个高斯模糊效果，它需要定义在filter标签里面，是一个单标签。feGaussianBlue通过stdDeviation属性定义模糊的数量，值是一个数字，值越大模糊的程度就越高。
二、实现模糊效果
1、绘制一个矩形
<svg width="110" height="110" style="background: #eee">
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow"/>
</svg>
2、添加高斯模糊效果
通过<defs>、<filter>、<feGaussianBlur>三个标签组合和stdDeviation属性，实现高斯模糊效果。
<svg width="110" height="110" style="background: #eee">
<defs>
<filter x="0" y="0">
<feGaussianBlur stdDeviation="15"/>
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow"/>
</svg>
3、效果与图形关联
模糊滤镜定义好之后，需要应用到图形上。首先在filter标签上添加一个id属性为f1，然后在rect标签上添加filter属性值为url(#f1)。
注意：图形上的filter属性值需要对应标签的id属性值，这样它们才能关联起来。
通过<defs>、<filter>、<feGaussianBlur>三个标签组合和stdDeviation属性，实现高斯模糊效果。
4、代码演示
三、<feOffset>、<feBlend>标签
1、<feOffset>标签
阴影效果可以通过feOffset滤镜和feBlend滤镜来实现，其原理是将一个SVG图形、图像或元素，在xy平面上做一定的偏移。
它需要定义在filter标签里面，是一个单标签。它有3个属性：
(1)dx：值是一个数字，表示阴影在x轴上的偏移量；
(2)dy：值是一个数字，表示阴影在y轴上的偏移量。
(3)in：表示阴影图像的来源。如果定义一个黑色的阴影，值可以设置为SourceAlpha；如果使用原始图像作为阴影，值可以设置为SourceGraphic。
2、<feBlend>标签
定义阴影图像后，还需要在偏移的图像上混合原始图像，要应用标签，给它定义in属性，值为SourceGraphic。
四、实现阴影效果
1、绘制一个矩形
<svg width="110" height="110" style="background: #eee">
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow"/>
</svg>
2、添加阴影效果
通过和标签组合，实现阴影效果。
<svg width="140" height="140" style="background: #eee">
<defs>
<filter x="0" y="0" width="200" height="200" id="f2">
<feOffset in="SourceAlpha" dx="20" dy="20"/>
<feBlend in="SourceGraphic"/>
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f2)"/>
</svg>
3、添加模糊效果
这里可以再结合标签，添加模糊效果。
<svg width="140" height="140" style="background: #eee">
<defs>
<filter x="0" y="0" width="200" height="200" id="f2">
<feOffset in="SourceAlpha" dx="20" dy="20"/>
<feGaussianBlur stdDeviation="10"/> <feBlend in="SourceGraphic"/>
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f2)"/>
</svg>
4、代码演示
五、代码链接
