SVG滤镜效果是通过元素定义的图像后处理操作，需在中声明并用filter属性引用，支持模糊、阴影等效果，由feGaussianBlur等原语组成，注意兼容性与性能。
SVG滤镜效果是通过
滤镜必须定义在 id 标识，再用 filter="url(#id)" 应用到目标元素上。
基本XML语法结构
一个最简可用的 SVG 滤镜包含三部分：容器定义、滤镜声明、图形引用。
-
-
id，常用属性有x、y、width、height（控制滤镜作用区域范围，避免被裁剪） -
- 目标图形元素（如
filter属性调用该滤镜
示例：给圆形加高斯模糊
svg width="200" height="200">说明：
-
in="SourceGraphic"表示以原始图形为输入源 -
stdDeviation控制模糊强度，值越大越虚化 -
x/y/width/height扩展滤镜画布，默认只覆盖图形边界，模糊易被截断，建议设为"-50%"和"200%"
常见滤镜原语与用途
每个 `
-
-
-
-
-
例如阴影效果 = 偏移 + 模糊 + 叠加：
关键注意事项
实际使用中容易忽略但影响效果和兼容性的要点：
-
浏览器支持不一致：IE 完全不支持；Safari 对部分原语（如
feDisplacementMap）支持有限；推荐优先测试 Chrome/Firefox/Edge -
性能敏感：`
` 计算开销大，`stdDeviation > 10` 在低端设备可能卡顿，动画中慎用 -
输入源选择很重要：
in="SourceAlpha"只取图形透明通道（适合做纯黑阴影），in="SourceGraphic"是完整彩色图形 - CSS 与 SVG 滤镜可共存：比如先用 CSS 设置 `opacity`，再叠加 SVG 滤镜，但注意渲染顺序（CSS 层在 SVG 滤镜之前）
