SVG滤镜用百分比设宽高不合理，能否以边距方式定义？

要解决百分比滤镜边界适配固定像素模糊的问题，有两个可靠的方案，完全不需要非程序员修改参数：

方案1：使用calc()混合绝对像素与相对百分比（现代浏览器支持） #

利用SVG对calc()的支持，直接为滤镜边界添加固定像素边距，同时保留基于元素边界盒的相对定位。这样窄元素不会截断模糊，宽元素也不会浪费空间：

<filter id="6pxBlur" filterUnits="objectBoundingBox"
  width="calc(100% + 36px)" x="calc(-18px)" 
  height="calc(100% + 36px)" y="calc(-18px)">
  <feGaussianBlur stdDeviation="6" />
</filter>

原理说明 #

高斯模糊的扩散范围大约是stdDeviation值的3倍（行业通用近似值，确保99.7%的模糊区域被包含）。所以stdDeviation=6时，每个方向需要预留6*3=18px的边距，总宽度/高度要额外加36px（左右/上下各18px）。这个方案能精准预留刚好足够的模糊空间，不会浪费绘制性能。

方案2：使用userSpaceOnUse配合动态继承（兼容旧浏览器） #

如果需要兼容不支持calc()的旧浏览器，可以切换到filterUnits="userSpaceOnUse"，利用SVG坐标继承特性让滤镜自动跟随元素位置：

<filter id="6pxBlur" filterUnits="userSpaceOnUse">
  <feGaussianBlur stdDeviation="6" edgeMode="none" />
</filter>

注意事项 #

• 无需手动设置x/y/width/height，浏览器会根据模糊值自动计算所需范围。
• 添加edgeMode="none"可避免浏览器默认的边缘重复填充行为，让模糊效果更自然。
• 滤镜会完全基于元素所在的用户坐标系，无论元素移动、缩放，模糊范围都会自动适配。

原百分比方案的问题 #

当filterUnits="objectBoundingBox"时，百分比基于元素宽高计算：

• 窄元素（如10px宽）的20%边距仅2px，远小于6px模糊需要的18px，导致模糊被截断。
• 宽元素（如1000px宽）的20%边距达200px，远超出所需的18px，额外绘制大量空白区域，浪费性能。

内容的提问来源于stack exchange，提问作者Andrew Swift