直接用feGaussianBlur无效，必须同时满足四点：filter定义在<svg><defs>内、通过filter="url(#id)"正确引用、指定in属性（如SourceGraphic或SourceAlpha）、显式设置filter的x/y/width/height以防裁剪。

直接用 feGaussianBlur 不会出效果，除非你同时搞定定义位置、引用方式、输入源和边界范围这四件事。

filter 必须定义在 <defs> 里，且包裹在 <svg> 中

浏览器（尤其是 Safari）会静默忽略没包在 <svg><defs> 里的 <filter>。哪怕你只是想给 HTML 元素用，也得塞一个隐藏的 <svg>：

<svg width="0" height="0" style="position: absolute; left: -9999px;">
  <defs>
    <filter id="blur1">
      <feGaussianBlur stdDeviation="4"/>
    </filter>
  </defs>
</svg>

漏掉 <defs> 或把 <filter> 直接写在 <body> 下，就等于没写。

in 属性不填或填错，大概率出现黑块或无反应

feGaussianBlur 不像 CSS 的 blur() 那样自动作用于整个渲染结果——它必须明确告诉浏览器“模糊谁”：

立即学习“前端免费学习笔记（深入）”；

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• in="SourceGraphic"：对图形本身（颜色+轮廓）整体模糊，适合柔焦、弱化背景
• in="SourceAlpha"：只模糊 Alpha 通道（即形状边缘），是做阴影的前提；漏掉这步，后续 <feOffset> 只会输出一团黑，不是阴影
• 不写 in 属性：浏览器按默认行为处理，但不同引擎表现不一致，Mac 上可能空白，Android 上可能黑块

stdDeviation 值不是像素半径，调大≠线性变糊

这个值是高斯函数的标准差，控制扩散权重分布，不是“模糊 5px”的物理距离：

• stdDeviation="1"：几乎看不出变化，仅边缘微融
• stdDeviation="3–5"：文字柔边、轻量阴影常用区间
• stdDeviation="8–12"：明显虚化，适合背景图层弱化
• stdDeviation="3 8"：X/Y 方向不同值，可模拟运动模糊（注意空格分隔，不是逗号）
• 超过 20 后，低端 Android 设备易卡顿，且边缘裁剪风险陡增

模糊“看不见”，往往是因为边界被裁了

滤镜默认作用域是原始图形边界外扩 10%。一旦 stdDeviation 较大（比如 ≥8），模糊像素就会溢出并被裁掉：

解决方法是显式扩大滤镜区域：

<filter id="blur1" x="-20%" y="-20%" width="140%" height="140%">
  <feGaussianBlur in="SourceGraphic" stdDeviation="10"/>
</filter>

不设 x/y/width/height，哪怕代码全对，也可能只看到一个“锐利的模糊内核”，四周黑边或干脆没反应。

最容易被忽略的是：SVG 滤镜效果不可见时，90% 不是代码写错，而是 in 没指定、<defs> 缺失、或滤镜区域太小——先检查这三项，比重写逻辑快得多。