SVG 滤镜
SVG 允许我们使用与位图描述语言类似的工具，例如阴影、模糊效果，甚至合并不同滤镜的结果。通过 <filter> 元素，可以添加这些效果并稍后将它们附加到对象上。
滤镜的作用类似于图层。创建它们时，请尝试逐步应用和测试效果。
此元素具有不同的属性，可帮助我们创建剪辑区域。在 filter 标签之间，我们可以定义允许我们实现所需效果的基元。这些基元之一是 <feGaussianBlur>。关键字 SourceAlpha 标识此基元的输入，在本例中为 in 输入。模糊量通过 stdDeviation 属性进行设置。
SVG 滤镜示例
html
<defs>
<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
</filter>
</defs>
<g id="ghost" filter="url(#drop-shadow)">
<!--Ghost drawing in here-->
</g>
上面的示例不会产生期望的输出。相反，我们需要添加更多滤镜基元来产生期望的渲染。通过添加 feoffset 和 result，可以定义效果图层。
<result> 属性是一个可供以后引用的引用。它与 XML ID 有很大不同，并且只能在实际的 filter 内部引用。<feoffset> 基元具有高斯模糊的模糊结果。<feMerge> 基元包含 <feMergeNode> 节点，这些节点将 offsetBlur 的结果作为输入，这将允许它出现在 sourceGraphic 下方。
实现更多基元
html
<defs>
<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur" />
<feoffset in="blur" dx="4" dy="4" result="offsetBlur" />
<feMerge>
<feMergeNode in="offsetBlur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>