如何解决SVG中GaussianBlur（高斯模糊）被裁剪的问题？

尽管SVG容器本身有足够的额外空间，但添加高斯模糊后的圆形顶部和底部仍被裁剪，效果如下：

原始代码 #

CSS：

svg { border: 1px solid red; }

HTML：

<!doctype html>
<html>
<head></head>
<body>
  <p>Hmm</p>
  <p>
    <svg xmlns="http://www.w3.org/2000/svg" width="600" height="300">
      <filter id="blur"><feGaussianBlur in="SourceGraphic" stdDeviation="10" /></filter>
      <defs>
        <g id="circ">
          <circle cx="0" cy="0" r="100" fill="none" stroke="black" stroke-width="20px"/>
        </g>
      </defs>
      <g filter="url(#blur)">
        <use href="#circ" x="130" y="140" />
        <use href="#circ" x="430" y="140" />
      </g>
    </svg>
  </p>
</body>
</html>

SVG滤镜默认的**裁剪区域（filter region）**刚好贴合应用滤镜的元素边界框。高斯模糊效果会向元素四周扩散，超出原元素的边界范围，但默认滤镜区域没有包含这部分扩展的模糊内容——哪怕SVG容器有多余空间，滤镜的裁剪逻辑是独立于容器的，所以超出部分会被直接裁掉。

调整<filter>元素的x、y、width、height属性，扩展滤镜的裁剪区域，让它能容纳模糊扩散的部分。高斯模糊的有效扩散范围大约是stdDeviation值的3倍，基于这个数值设置扩展量即可。

方法1：固定数值扩展（适配特定尺寸元素） #

给<filter>添加固定偏移量，刚好覆盖模糊扩散范围：

<filter id="blur" x="-30" y="-30" width="260" height="260">
  <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
</filter>

方法2：百分比扩展（适配任意尺寸元素） #

用百分比设置扩展范围，灵活性更强：

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

• x="-20%"/y="-20%"：让滤镜区域向上下左右各扩展原元素边界框的20%
• width="140%"/height="140%"：让滤镜区域总尺寸为原元素的140%，刚好容纳模糊扩散内容

完整修改后的HTML #

<!doctype html>
<html>
<head></head>
<body>
  <p>Hmm</p>
  <p>
    <svg xmlns="http://www.w3.org/2000/svg" width="600" height="300">
      <!-- 扩展滤镜裁剪区域 -->
      <filter id="blur" x="-20%" y="-20%" width="140%" height="140%">
        <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
      </filter>
      <defs>
        <g id="circ">
          <circle cx="0" cy="0" r="100" fill="none" stroke="black" stroke-width="20px"/>
        </g>
      </defs>
      <g filter="url(#blur)">
        <use href="#circ" x="130" y="140" />
        <use href="#circ" x="430" y="140" />
      </g>
    </svg>
  </p>
</body>
</html>

内容的提问来源于stack exchange，提问作者Jason S