SVG 滤镜效果是通过元素定义的图像后处理操作，需在中声明并用 filter 属性引用，支持模糊、阴影等效果，由 feGaussianBlur 等原语组成，注意兼容性与性能。
SVG 滤镜效果是通过 <filter></filter> 元素定义的一组图像处理操作，用于给 SVG 图形添加模糊、阴影、光照、色彩变换等视觉效果。它不是直接绘制图形，而是对已有图形（如 <rect></rect>、<circle></circle>）的像素进行后处理，类似 Photoshop 中的图层样式。
滤镜必须定义在 <defs></defs> 容器内，通过 id 标识，再用 filter="url(#id)" 应用到目标元素上。
基本 XML 语法结构
一个最简可用的 SVG 滤镜包含三部分：容器定义、滤镜声明、图形引用。
-
<defs></defs>：包裹所有可复用资源（滤镜、渐变、图案等） -
<filter></filter>：定义滤镜本身，需设id，常用属性有x、y、width、height（控制滤镜作用区域范围，避免被裁剪） -
<fegaussianblur></fegaussianblur>、<feoffset></feoffset>等：滤镜原语（filter primitive），每个代表一种图像操作 - 目标图形元素（如
<circle></circle>）通过filter属性调用该滤镜
示例：给圆形加高斯模糊
svg width=”200″ height=”200″>
说明：
-
in="SourceGraphic"表示以原始图形为输入源 -
stdDeviation控制模糊强度，值越大越虚化 -
x/y/width/height扩展滤镜画布，默认只覆盖图形边界，模糊易被截断，建议设为"-50%"和"200%"
常见滤镜原语与用途
每个 `
-
<feoffset dx="2" dy="2"></feoffset>：平移像素，常用于生成阴影偏移 -
<fegaussianblur stddeviation="3"></fegaussianblur>：高斯模糊，制造柔边或景深感 -
<feblend mode="multiply"></feblend>：混合两个输入图层（如原图 + 偏移阴影） -
<fecolormatrix type="saturate" values="0"></fecolormatrix>：调整饱和度、灰度、对比度等 -
<fecomposite operator="in"></fecomposite>：按遮罩裁剪，实现文字镂空、蒙版效果
例如阴影效果 = 偏移 + 模糊 + 叠加：
关键注意事项
实际使用中容易忽略但影响效果和兼容性的要点：
- 浏览器 支持不一致：IE 完全不支持；Safari 对部分原语（如
feDisplacementMap）支持有限；推荐优先测试 Chrome/Firefox/Edge - 性能敏感：`
` 计算开销大，`stdDeviation > 10` 在低端设备可能卡顿，动画中慎用 - 输入源选择很重要：
in="SourceAlpha"只取图形透明通道（适合做纯黑阴影），in="SourceGraphic"是完整彩色图形 - CSS 与 SVG 滤镜可共存：比如先用 CSS 设置 `opacity`，再叠加 SVG 滤镜，但注意渲染顺序（CSS 层在 SVG 滤镜之前）
