SVG高斯模糊滤镜feGaussianBlur使用教程与效果详解

如何利用HTML的SVG的feGaussianBlur滤镜为图形添加高斯模糊效果

在SVG的世界里，feGaussianBlur是实现高斯模糊效果的核心滤镜元素。它和CSS里那个简单的filter: blur()可不太一样，后者更像是个“一键美化”。而feGaussianBlur则提供了更精细的控制权——无论是模糊的方向、输入的源图像，还是作为滤镜链中的一个环节与其他效果串联，它都能胜任。当你需要实现非均匀模糊，或者构建复杂的视觉特效时，它往往是更专业的选择。

如何正确声明并引用 feGaussianBlur 滤镜

第一步，也是新手最容易踩坑的地方：滤镜的声明位置。你必须将定义在标签内部，然后通过url(#id)的方式在目标元素上引用。图省事直接放在根节点下？小心了，这可能导致在Safari等浏览器中滤镜完全失效。

• 唯一标识是关键：id属性必不可少，并且必须确保它在整个文档中是唯一的，避免与CSS类名或Ja vaScript变量产生冲突。
• 引用格式要规范：filter属性的值必须用url()包裹起来，像这样：filter="url(#blur1)" ✅。直接写成filter="#blur1" ❌ 是行不通的。
• 注意模糊边界：滤镜默认的作用区域只比原始图形的边界外扩10%。如果你的模糊值设得很大（比如stdDeviation="20"），模糊的边缘很可能会被裁剪掉。这时候，就需要显式地设置标签的x、y、width、height属性来扩大它的“画布”。

in 属性选错会导致“黑块”或无效果

很多人写feGaussianBlur时，只关心模糊程度stdDeviation，却忽略了in属性。只写，不指定in，浏览器会按默认方式处理，但结果往往不可预测。这里有两个最关键的输入源：

• in="SourceGraphic"：对原始图形（包括其颜色和透明度信息）进行整体模糊。这适合用来制作柔焦、光晕这类效果。
• in="SourceAlpha"：仅对图形的Alpha通道（也就是形状的轮廓）进行模糊。这个选项至关重要，尤其是在生成阴影时——如果你漏掉了这一步，后面接上（偏移）后，得到的很可能不是阴影，而是一团实心的黑色块。
• 关于result属性：你可以通过result="blurOut"为当前模糊结果命名，但这个“中间产物”只能在同一个内部，被后续的滤镜节点通过in属性引用，无法跨不同的滤镜定义使用。

stdDeviation 的数值与实际模糊程度关系

这个值可不是简单的像素半径，它代表的是高斯函数的标准差，决定了模糊扩散的范围，而且这种关系是非线性的。根据实际开发经验，可以大致参考以下范围：

• stdDeviation="1"：效果几乎不可见，仅能让边缘有一丝轻微的软化。
• stdDeviation="2–4"：这个区间比较适合为文字添加柔边，或者生成轻量级的阴影。
• stdDeviation="8–12"：会产生明显的虚化效果，常用来弱化背景元素，突出前景。
• 一个小技巧：它还支持双参数写法，例如stdDeviation="3 8"，这表示在X轴方向模糊较弱，而在Y轴方向模糊较强，可以用来模拟物体快速垂直运动的动态模糊效果。
• 性能提醒：当值超过20以后，性能开销会显著增加，在低端Android设备上尤其容易引发重绘卡顿，使用时需要权衡效果与性能。

为什么单独用 feGaussianBlur 有时“看不见效果”

这可能是最让人困惑的情况了：代码明明没错，为什么就是看不到模糊？原因在于，模糊滤镜本身并不改变图形的位置或层级，它只是对像素进行混合计算。

想象一下，在一个白色背景上，对一个白色的矩形应用模糊，视觉上当然不会有任何变化。但还有一些更隐蔽的原因：

• 空间问题：在SVG默认的渲染逻辑里，模糊后的图形仍然占据着原始的坐标空间，画布不会自动扩大。所以，你需要借助将模糊结果偏移一下，或者用将它和原始图形叠加起来，才能真正看到“影子”或“光晕”分离出来的效果。
• 文字陷阱：如果目标元素是，并且没有设置fill（填充色），模糊后可能会因为透明度叠加而变得极淡，以至于看不见。
• 浏览器差异：Firefox 浏览器对于小于0.5的stdDeviation值，会直接截断为0，这自然会导致模糊效果完全消失。

说到底，写对一行标签并不难。真正的挑战在于理解它只是滤镜流水线上的一个环节。你必须想清楚三个问题：你要模糊的到底是什么（in属性）？模糊之后的结果要用来做什么（result属性及后续引用）？以及，如何让这个模糊结果和原始图形和谐共处（通过或进行合成）？这三个环节，漏掉任何一个，都可能导致效果消失，或者出现意料之外的黑块。