如何利用HTML的SVG的feGaussianBlur滤镜为图形添加高斯模糊效果-html教程-PHP中文网

fegaussianblur是svg中实现高斯模糊的核心元素，需在内定义并设唯一id，通过filter="url(#id)"引用；in属性必须指定（如sourcegraphic或sourcealpha），stddeviation控制模糊程度，支持单值或双值（x/y方向），可设result供滤镜链内后续节点调用。

如何利用html的svg的fegaussianblur滤镜为图形添加高斯模糊效果

feGaussianBlur 是 SVG 中实现高斯模糊的核心滤镜元素，它不依赖 CSS 的 filter: blur()，能更精准控制模糊方向、输入源和中间结果，适合需要非均匀模糊或与其他滤镜串联的场景。

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

必须将 <filter></filter> 定义在 <defs></defs> 内，且通过 url(#id) 在目标元素上引用；直接写在 <svg></svg> 根节点下但未包裹在 <defs></defs> 中会导致部分浏览器（如 Safari）失效。

id 属性是必需的，且需全局唯一，避免与 CSS 类名或 JS 变量冲突
filter 属性值必须带 url() 包裹，不能省略括号或引号：filter="url(#blur1)" ✅，filter="#blur1" ❌
滤镜默认作用域为原始图形边界外扩 10%，若模糊值大（如 stdDeviation="20"），建议显式设置 filter 的 x/y/width/height 属性，否则边缘可能被裁剪

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

常见错误是只写 <fegaussianblur stddeviation="5"></fegaussianblur>，没指定 in，此时浏览器按默认行为处理，但结果不可控。关键输入源有两类：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

in="SourceGraphic"：对原始图形（含颜色、透明度）整体模糊，适合柔焦效果
in="SourceAlpha"：仅对图形的 Alpha 通道（即形状轮廓）模糊，常用于阴影生成——漏掉这一步，<feoffset></feoffset> 后只会得到一团黑，不是阴影
自定义中间结果（如 result="blurOut"）只能在当前 <filter></filter> 内被后续节点通过 in 引用，不能跨 filter 使用

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

该值不是像素半径，而是高斯函数的标准差；它决定模糊扩散范围，但非线性。实测经验：

stdDeviation="1"：几乎不可见，仅边缘轻微软化
stdDeviation="2–4"：适合文字柔边或轻量阴影
stdDeviation="8–12"：明显虚化，常用于背景弱化
支持双参数写法：stdDeviation="3 8" 表示 X 方向模糊弱、Y 方向强，可模拟运动模糊
超过 20 后性能下降明显，尤其在低端 Android 设备上易触发重绘卡顿

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

因为模糊本身不改变图形位置或层级，只是像素混合。若目标元素无对比背景（如白底上白色矩形+模糊），视觉上毫无变化；更隐蔽的问题是：

SVG 默认渲染顺序中，模糊后的图形仍占据原始坐标空间，不会自动扩大画布——你需要靠 <feoffset></feoffset> 或 <femerge></femerge> 显式偏移或叠加才能看到“影子”
若目标元素是 <text></text> 且未设置 fill，模糊后可能因透明度叠加变淡到不可见
Firefox 对 stdDeviation 小于 0.5 的值会截断为 0，导致完全无模糊

真正难的不是写对一行 <fegaussianblur></fegaussianblur>，而是理解它只是滤镜链里的一环——你得想清楚：要模糊什么（in）、模糊后拿来干什么（result）、以及怎么让它和原始图形共存（<femerge></femerge> 或 <fecomposite></fecomposite>）。漏掉其中任意一环，都可能让效果消失或变成黑块。