今天学习SVG滤镜feGaussianBlur和feDropShadow
内容提要
这篇文章介绍了SVG中的feGaussianBlur和feDropShadow两个滤镜元素的使用方法和效果。feGaussianBlur用于实现高斯模糊效果，而feDropShadow用于实现投影效果。文章还给出了具体的代码示例和效果展示。作者表示今天学习收获颇多，但也感叹时间不够用，希望下周有机会去钓鱼。
延伸解读
feGaussianBlur 的核心属性：stdDeviation
feGaussianBlur 用于实现高斯模糊，其关键属性是 stdDeviation，表示标准偏差，数值越大模糊程度越高。文章示例中分别使用 1、5、10 来展示不同模糊大小。此外，in 属性表示输入源，但本文暂未深入；edgeMode 属性控制边缘模糊方式，作者实测差异肉眼不可见，因此日常可忽略。
feDropShadow 的属性与使用要点
feDropShadow 用于生成投影，类似 CSS 的 drop-shadow()。它支持 dx、dy 控制偏移，stdDeviation 控制模糊大小，flood-color 设置投影颜色，flood-opacity 设置透明度。由于 flood-color 支持 rgba() 和 #rrggbbaa，flood-opacity 多用于关键字颜色的场景。文章示例用红色半透明投影展示了文字效果。
组合滤镜实现局部模糊与投影
文章演示了结合 feGaussianBlur、feDropShadow 和 clipPath 实现图片局部模糊并带投影的效果。原理是：用 clipPath 裁剪出局部区域，对该区域应用高斯模糊，再覆盖到未模糊的底图上。同时，另一张图片应用 feDropShadow 产生投影。这展示了 SVG 滤镜组合使用的灵活性。
Q&A
feGaussianBlur的主要功能是什么？
feGaussianBlur用于实现高斯模糊效果，支持stdDeviation属性来控制模糊大小。
如何使用feDropShadow实现投影效果？
使用feDropShadow可以通过设置dx、dy、stdDeviation、flood-color和flood-opacity属性来实现投影效果。
在SVG中，如何控制高斯模糊的大小？
通过设置feGaussianBlur的stdDeviation属性，可以控制高斯模糊的大小。
feDropShadow的属性中，flood-color和flood-opacity有什么区别？
flood-color指定投影的填充颜色，而flood-opacity控制投影的透明度。
能否提供一个使用feGaussianBlur和feDropShadow的代码示例？
可以，示例代码包括使用feGaussianBlur和feDropShadow来实现模糊和投影效果的SVG代码。
学习SVG滤镜的过程中有哪些收获？
学习过程中收获了对feGaussianBlur和feDropShadow的理解，以及clipPath元素的使用。
