SVG的是纯声明式XML图像处理机制，通过定义唯一id的标签，组合feGaussianBlur等原语，在指定坐标系中对SourceGraphic等输入进行链式处理实现模糊、阴影、发光等效果。
SVG 的 SourceGraphic）、内置滤镜原语（如
基础结构：定义一个可用的 filter
每个 filter 必须有唯一 id，并用
-
x、y、width、height：定义滤镜作用区域（默认是对象边界框的 120%，常设为-20%到120%避免截断阴影/模糊） -
filterUnits：设为userSpaceOnUse（按 SVG 坐标）或默认objectBoundingBox（按元素归一化尺寸，推荐后者） -
primitiveUnits：控制滤镜原语内部单位（通常用userSpaceOnUse更直观）
示例（最简高斯模糊）：
svg xmlns="http://www.w3.org/2000/svg">常用滤镜原语与效果组合
滤镜效果靠串联多个 in 输入（默认是 SourceGraphic）：
-
阴影（drop-shadow）：用
先偏移图形 → 模糊偏移层 → 合并到原图 -
内阴影：把
in="SourceAlpha"作为起点，模糊后反向叠加（需 -
发光（glow）：多次不同强度的
-
颜色调整：用
type="matrix" values="0.33 0.33 0.33 0 0 …"）或
关键技巧：避免常见坑
- 滤镜默认只对「绘制内容」生效，不作用于 stroke 或 fill 的渐变色本身——要让描边也模糊，需把描边转为路径（
stroke-to-path）或用复制后单独滤镜 -
stdDeviation为 0 时部分浏览器可能失效，最小建议设为0.1 - 性能敏感场景慎用大值
stdDeviation或多层模糊；可用 - 想让滤镜响应鼠标事件（如 hover），确保目标元素没有
pointer-events: none，且滤镜区域未意外裁剪交互热区
进阶：动态控制与复用
filter 可配合 CSS 自定义属性或 JS 动态改写 stdDeviation 等属性值：
也可将 filter 定义在外部 .svg 文件中，用 filter="url(./filters.svg#blur)" 引用，利于复用和缓存。
基本上就这些。SVG filter 不复杂但容易忽略坐标系和输入链，动手试几个原语连起来，比看十篇教程都管用。
