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