SVG滤镜效果怎么实现 feGaussianBlur和feColorMatrix

svg滤镜通过定义，实现高斯模糊（stdDeviation控制强度），支持灰度、反色、饱和度调节等颜色变换，二者可串联组合并用result/in属性链式处理，最终通过Filter=”url(#id)”绑定应用。

SVG滤镜效果通过 元素定义，其中 和 是两个常用的基础滤镜原语，分别用于模糊和颜色变换。它们可以单独使用，也能串联组合实现更丰富的视觉效果。

feGaussianBlur：实现高斯模糊

它对图像像素进行加权平均，产生柔和的模糊效果，关键属性是 stdDeviation（标准差），数值越大越模糊。

• 基本写法：在 内添加 ，值可为单个数（x=y）或两个数（x y）
• 注意作用范围：默认只影响滤镜区域内的内容，需用 filterUnits="userSpaceOnUse" 或调整 x/y/width/height 控制边界，避免模糊被裁剪
• 常见搭配：常接在 后做阴影虚化，或与 结合实现“毛玻璃”效果（叠加原始图层+模糊图层）

feColorMatrix：灵活控制颜色与透明度

它通过一个 5×4 矩阵对每个像素的 R, G, B, A, 1 向量做线性变换，支持多种预设类型（matrix、saturate、hueRotate、luminanceToAlpha 等）。

• 灰度效果：用 type="matrix" 配置灰度系数，例如 values="0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0 0 0 1 0"
• 去色（黑白反相）：type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"
• 调饱和度：直接用 type="saturate" value="0.5"（0=灰度，1=原样，>1=增强）
• 注意 alpha 通道：矩阵第 4 行控制透明度，修改它可实现淡入、遮罩等效果

组合使用：链式处理与图层混合

多个滤镜原语按顺序执行，前一个的输出是后一个的输入。可用 result 属性命名中间结果，在后续节点中通过 in 引用。

• 模糊+变色：先 ，再
• 模拟毛玻璃：用 或 提供背景色， 模糊它，再用 叠加原始内容
• 性能提示：避免过大的 stdDeviation 或高频重复滤镜；对动画元素慎用，可考虑 css backdrop-filter 替代

应用到元素：绑定 filter 属性

定义好滤镜后，通过 CSS 的 filter 属性或 SVG 元素的 filter 属性引用，格式为 url(#filter-id)。

• SVG 内部引用：
• CSS 中使用：img { filter: url(#myFilter); }（注意跨域限制，内联 SVG 更可靠）
• 动态切换：可通过 js 修改元素的 filter 属性值，或操作 内子元素的属性实现实时调节