feGaussianBlur是SVG中实现高斯模糊的核心元素，需在<defs>内定义<filter>并设唯一id，通过filter="url(#id)"引用；in属性必须指定（如SourceGraphic或SourceAlpha），stdDeviation控制模糊程度，支持单值或双值（X/Y方向），可设result供滤镜链内后续节点调用。
feGaussianBlur 是 SVG 中实现高斯模糊的核心滤镜元素，它不依赖 CSS 的 filter: blur()，能更精准控制模糊方向、输入源和中间结果，适合需要非均匀模糊或与其他滤镜串联的场景。
如何正确声明并引用 feGaussianBlur 滤镜
必须将 <filter> 定义在 <defs> 内，且通过 url(#id) 在目标元素上引用；直接写在 <svg> 根节点下但未包裹在 <defs> 中会导致部分浏览器（如 Safari）失效。
-
id属性是必需的，且需全局唯一，避免与 CSS 类名或 JS 变量冲突 -
filter属性值必须带url()包裹，不能省略括号或引号：filter="url(#blur1)"✅，filter="#blur1"❌ - 滤镜默认作用域为原始图形边界外扩 10%，若模糊值大（如
stdDeviation="20"），建议显式设置filter的x/y/width/height属性，否则边缘可能被裁剪
in 属性选错会导致“黑块”或无效果
常见错误是只写 <feGaussianBlur stdDeviation="5"/>，没指定 in，此时浏览器按默认行为处理，但结果不可控。关键输入源有两类：
-
in="SourceGraphic"：对原始图形（含颜色、透明度）整体模糊，适合柔焦效果 -
in="SourceAlpha"：仅对图形的 Alpha 通道（即形状轮廓）模糊，常用于阴影生成——漏掉这一步，<feOffset>后只会得到一团黑，不是阴影 - 自定义中间结果（如
result="blurOut"）只能在当前<filter>内被后续节点通过in引用，不能跨 filter 使用
stdDeviation 的数值与实际模糊程度关系
该值不是像素半径，而是高斯函数的标准差；它决定模糊扩散范围，但非线性。实测经验：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
-
stdDeviation="1"：几乎不可见，仅边缘轻微软化 -
stdDeviation="2–4"：适合文字柔边或轻量阴影 -
stdDeviation="8–12"：明显虚化，常用于背景弱化 - 支持双参数写法：
stdDeviation="3 8"表示 X 方向模糊弱、Y 方向强，可模拟运动模糊 - 超过
20后性能下降明显，尤其在低端 Android 设备上易触发重绘卡顿
为什么单独用 feGaussianBlur 有时“看不见效果”
因为模糊本身不改变图形位置或层级，只是像素混合。若目标元素无对比背景（如白底上白色矩形+模糊），视觉上毫无变化；更隐蔽的问题是：
- SVG 默认渲染顺序中，模糊后的图形仍占据原始坐标空间，不会自动扩大画布——你需要靠
<feOffset>或<feMerge>显式偏移或叠加才能看到“影子” - 若目标元素是
<text>且未设置fill，模糊后可能因透明度叠加变淡到不可见 - Firefox 对
stdDeviation小于0.5的值会截断为0，导致完全无模糊
真正难的不是写对一行 <feGaussianBlur>，而是理解它只是滤镜链里的一环——你得想清楚：要模糊什么（in）、模糊后拿来干什么（result）、以及怎么让它和原始图形共存（<feMerge> 或 <feComposite>）。漏掉其中任意一环，都可能让效果消失或变成黑块。
