svg滤镜通过定义，实现高斯模糊（stddeviation控制强度），支持灰度、反色、饱和度调节等颜色变换，二者可串联组合并用result/in属性链式处理，最终通过filter="url(#id)"绑定应用。
SVG滤镜效果通过 <filter></filter> 元素定义，其中 <fegaussianblur></fegaussianblur> 和 <fecolormatrix></fecolormatrix> 是两个常用的基础滤镜原语，分别用于模糊和颜色变换。它们可以单独使用，也能串联组合实现更丰富的视觉效果。
feGaussianBlur：实现高斯模糊
它对图像像素进行加权平均，产生柔和的模糊效果，关键属性是 stdDeviation（标准差），数值越大越模糊。
-
基本写法：在
<filter></filter>内添加<fegaussianblur stddeviation="2"></fegaussianblur>，值可为单个数（x=y）或两个数（x y） -
注意作用范围：默认只影响滤镜区域内的内容，需用
filterUnits="userSpaceOnUse"或调整x/y/width/height控制边界，避免模糊被裁剪 -
常见搭配：常接在
<feoffset></feoffset>后做阴影虚化，或与<femerge></femerge>结合实现“毛玻璃”效果（叠加原始图层+模糊图层）
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 引用。
-
模糊+变色：先
<fegaussianblur stddeviation="3" result="blurred"></fegaussianblur>，再<fecolormatrix in="blurred" type="saturate" value="0.2"></fecolormatrix> -
模拟毛玻璃：用
<feimage></feimage>或<feflood></feflood>提供背景色，<fegaussianblur></fegaussianblur>模糊它，再用<fecomposite></fecomposite>叠加原始内容 -
性能提示：避免过大的
stdDeviation或高频重复滤镜；对动画元素慎用，可考虑 CSSbackdrop-filter替代
应用到元素：绑定 filter 属性
定义好滤镜后，通过 CSS 的 filter 属性或 SVG 元素的 filter 属性引用，格式为 url(#filter-id)。
-
SVG 内部引用：
<rect filter="url(#myFilter)" ...></rect> -
CSS 中使用：
img { filter: url(#myFilter); }（注意跨域限制，内联 SVG 更可靠） -
动态切换：可通过 JS 修改元素的
filter属性值，或操作<filter></filter>内子元素的属性实现实时调节
