如何计算使用SVG feGaussianBlur实现投影效果的滤镜尺寸

核心计算逻辑 #

高斯模糊的可见范围遵循W3C SVG规范定义的3倍标准差规则：超过3 * stdDeviation范围的模糊权重几乎为0，不会产生可见效果。在此基础上叠加偏移量dx、dy的影响，分别计算x、y轴的预留边距即可得到最终需要的滤镜尺寸，该规则兼容所有支持SVG标准的浏览器，不会出现跨端裁剪差异。

分维度计算公式 #

假设你的模糊参数stdDeviation的x、y分量分别为sx、sy（如果是单值输入则sx=sy）：

X轴方向预留边距 #

• 左侧边距：sx * 3 + max(0, -dx)（dx为负即阴影左偏时，需要额外预留dx绝对值的空间）
• 右侧边距：sx * 3 + max(0, dx)（dx为正即阴影右偏时，需要额外预留dx的空间）
• 滤镜总宽度 = 原始元素宽度 + 左侧边距 + 右侧边距

Y轴方向预留边距 #

• 上边距：sy * 3 + max(0, -dy)（dy为负即阴影上偏时，需要额外预留dy绝对值的空间）
• 下边距：sy * 3 + max(0, dy)（dy为正即阴影下偏时，需要额外预留dy的空间）
• 滤镜总高度 = 原始元素高度 + 上边距 + 下边距

适配代码示例 #

你可以直接将计算出的边距代入filter的属性配置，避免阴影被默认滤镜区域裁剪：

<filter id="drop_shadow" 
  x="-${左侧边距}" 
  y="-${上边距}" 
  width="${原始元素宽度 + 左侧边距 + 右侧边距}" 
  height="${原始元素高度 + 上边距 + 下边距}">
  <feGaussianBlur in="SourceAlpha" stdDeviation="${sx}" result="blur_result"/>
  <feOffset in="blur_result" dx="${dx}" dy="${dy}" result="shadow"/>
  <feMerge>
     <feMergeNode in="shadow"/>
     <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>

如果使用相对百分比单位，也可以按比例换算后设置，通用场景下如果阴影尺寸不大，也可以直接用固定的大边距（比如x="-20%" y="-20%" width="140%" height="140%"）省略计算步骤。

内容的提问来源于stack exchange，提问作者Lokesh Sharma