SVG滤镜（）是需先声明后调用的可复用图像处理定义，须置于内并设唯一id；通过filter CSS属性或SVG元素filter属性以url(#id)形式引用，内部由按序执行的滤镜原语（如feGaussianBlur、feOffset、feMerge等）构成。
SVG滤镜（<filter></filter>）不是直接渲染的元素，而是一个可复用的图像处理定义，必须先声明再通过 filter CSS 属性或 SVG 元素的 filter 属性调用。
基础声明：用 定义滤镜区域
滤镜需放在 <defs></defs> 内（推荐），并赋予唯一 id。它本身不显示，只提供处理逻辑：
-
<filter id="blur"></filter>是最简声明，id用于后续引用 - 可设置
x、y、width、height控制滤镜作用区域（默认为 -10% 到 110%，确保模糊等效果不被裁剪） - 常用写法：
<filter id="myBlur" x="-20%" y="-20%" width="140%" height="140%"></filter>
内置滤镜原语：添加具体效果
<filter></filter> 内部由一个个“滤镜原语”（filter primitive）组成，每个完成一种图像操作，按顺序执行：
-
<fegaussianblur stddeviation="2"></fegaussianblur>：高斯模糊，stdDeviation越大越模糊 -
<feoffset dx="2" dy="2"></feoffset>：偏移原始图像，常配合模糊做阴影 -
<femerge><femergenode></femergenode><femergenode></femergenode></femerge>：合并多层效果（如阴影+原图） - 其他常见原语：
<fecolormatrix></fecolormatrix>（调色）、<fecomposite></fecomposite>（混合）、<feturbulence></feturbulence>（噪点/云纹）
调用滤镜：绑定到目标元素
声明后需显式应用，有两种主流方式：
立即学习“前端免费学习笔记（深入）”；
-
CSS 方式：在样式中写
filter: url(#blur);（注意括号内是#id） -
SVG 属性方式：在图形元素上加
filter="url(#blur)"，例如： - 注意：URL 必须带
url()包裹，且引号不能省略；ID 名称区分大小写
一个完整可用示例
以下代码实现带投影的蓝色圆圈：
