在SVG中，滤镜是一种作用在图形元素上的像素级处理机制。它允许开发者不借助任何外部图像软件，仅用声明式标签改变元素的渲染结果。feGaussianBlur与feColorMatrix是滤镜体系里最常用也最容易上手的两个原语，前者做模糊，后者做色彩变换。
一、SVG滤镜的基础结构
所有滤镜效果都必须包裹在<filter>标签中，并且需要赋予一个唯一的id。目标元素通过filter属性引用这个id，浏览器在渲染时就会把原图送入滤镜管线处理。滤镜区域默认比元素稍大，以避免边缘被裁切，也可以用x、y、width、height自行调整。
一个最简结构如下，我们在defs里定义滤镜，再把它挂到rect上：
<svg width="200" height="200">
<defs>
<filter id="simpleBlur">
<feGaussianBlur stdDeviation="3" />
</filter>
</defs>
<rect x="20" y="20" width="160" height="160" fill="tomato" filter="url(#simpleBlur)" />
</svg>
上面的代码会让红色矩形带有轻微模糊边缘。注意filter引用写法是url(#id)，这是SVG内部链接的标准形式。如果滤镜只含单个原语，处理结果直接输出；若含多个，则按书写顺序串联。
二、feGaussianBlur的实现与参数
feGaussianBlur基于高斯函数对图像做卷积，达到柔化效果。它的核心属性是stdDeviation，表示标准差，也就是模糊半径。值越小越清晰，值越大越像雾。该属性支持两个数字，分别控制x与y方向，若只写一个则双向一致。
以下示例把文字做成了明显的虚化背景，常用于卡片底纹：
<svg width="300" height="120">
<defs>
<filter id="textBlur" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="4 1" />
</filter>
</defs>
<text x="10" y="70" font-size="40" filter="url(#textBlur)">模糊文字</text>
</svg>
这里stdDeviation写成了4 1，代表横向模糊更强、纵向较弱，产生拉丝感。另外可配合edgeMode决定边界外推方式，不过多数场景用默认duplicate即可。性能上，模糊半径越大计算量越高，在移动端应避免过度使用。
与其他原语组合
feGaussianBlur常放在滤镜链开头，先模糊再上色或合成。比如先模糊原图，再用feMerge把清晰图叠在上面，就能做出阴影或发光。它不直接修改颜色，只动空间分布，因此和色彩类原语互补。
三、feColorMatrix的色彩矩阵运算
feColorMatrix用一串数字对像素的RGBA四个通道做线性变换。type最常用的是matrix，此时value里写二十个值，排成四行五列。每行对应输出的一项（R、G、B、A），前五个数分别是输入R、G、B、A及常数偏移。
例如把图像转成灰度，可以用如下矩阵，令三个输出通道都取原亮度的加权：
<svg width="200" height="200">
<defs>
<filter id="gray">
<feColorMatrix 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" />
</filter>
</defs>
<image href="https://ipipp.com/demo.jpg" width="200" height="200" filter="url(#gray)" />
</svg>
除了matrix，type还支持saturate（饱和度，值为0到1）、hueRotate（色相旋转，单位度）、luminanceToAlpha（亮度转透明）。这些其实是matrix的语法糖，但写起来更直观。比如type="saturate" values="0"等同于上面的灰度矩阵。
矩阵运算的注意点
矩阵中常数偏移项位于每行末尾，会直接加到结果上，取值范围通常0到1对应0到255。若输出值超过1会被截断。由于运算逐像素进行，它比CSS的filter函数更底层，可做出CSS难以描述的混合变色效果。
四、feGaussianBlur与feColorMatrix联合实战
把两者放在同一个filter里，就能先虚化再调色，形成类似相机的柔光滤镜。下面例子生成带蓝调的朦胧风景：
<svg width="300" height="200">
<defs>
<filter id="dream">
<feGaussianBlur stdDeviation="2" result="blur" />
<feColorMatrix in="blur" type="matrix" values="
0.8 0 0 0 0
0 0.9 0 0 0
0 0 1.2 0 0
0 0 0 1 0" />
</filter>
</defs>
<image href="https://ipipp.com/scene.jpg" width="300" height="200" filter="url(#dream)" />
</svg>
代码中feGaussianBlur用result命名中间结果，feColorMatrix通过in="blur"取用。矩阵把蓝通道放大到1.2倍，整体偏冷。这种写法让滤镜可复用，只需换引用元素即可套用到任意图片或图形。
在调试时建议把stdDeviation和矩阵值分开测，先确认模糊程度再调颜色，避免两者叠加看不出问题来源。另外SVG滤镜在现代浏览器支持良好，但旧版IE需降级处理，可用CSS滤镜做备选。
五、常见误区与小结
一个常见错误是以为feColorMatrix能像PS图层那样按区域变色，其实它全局统一运算，要做局部需配合feImage或遮罩。还有人把stdDeviation写得过大导致边缘出现黑边，这时应扩大filter区域。
总体看，feGaussianBlur与feColorMatrix分别掌管空间模糊与色彩重映射，理解它们的属性与串联方式，就能用纯SVG实现丰富的视觉滤镜，减少图片资源请求，也方便动态调整。
SVG_filterfeGaussianBlurfeColorMatrix修改时间：2026-08-01 06:15:32