如何为SVG元素实现符合CSS参数的box-shadow效果

参数映射规则 #

先拆解目标阴影的4个核心参数，对应到SVG滤镜的实现逻辑：
目标阴影参数：box-shadow: 0px 10px 25px 0px rgba(18, 103, 17, 0.15);

• 水平偏移0px、垂直偏移10px：直接对应滤镜的feOffset组件的dx/dy值
• 25px模糊半径：feGaussianBlur的stdDeviation需要取模糊值的1/2，也就是12.5——因为CSS的blur值是高斯模糊的全视觉半径，而SVG滤镜的stdDeviation是高斯核的标准差，两者存在固定的2倍换算差
• 0px扩散半径：如果需要非0的扩散值，可在模糊层之前加feMorphology组件，正扩散用operator="dilate"，负扩散用operator="erode"，radius值和CSS扩散值一一对应

原有代码的问题 #

• 重复写了两层feOffset：额外加的dx="-10"会把阴影横向偏移10px，和目标的0水平偏移完全不符
• 模糊值设置错误：直接把25px的模糊值塞给stdDeviation，会导致模糊范围是预期的2倍，阴影过度虚散
• 未预留滤镜渲染区域：SVG默认的滤镜裁剪范围仅为元素周围10%的区域，大尺寸模糊会被边缘裁掉，需要手动给filter标签加x="-50%" y="-50%" width="200%" height="200%"留出足够渲染空间

可行的实现方式 #

方式1：使用通用CSS滤镜实现（最简便） #

SVG元素全量兼容CSS的filter: drop-shadow()，效果和矢量图形完全贴合，无需手写复杂滤镜：

<svg width="250" height="250">
  <circle cx="112.53" cy="112.53" r="87" fill="none" stroke="#74C947" stroke-width="25.53" 
    style="filter: drop-shadow(0px 10px 12.5px rgba(18, 103, 17, 0.15));">
  </circle>
</svg>

注：该方式不支持扩散半径参数，仅适合无spread值的阴影需求

方式2：手写SVG滤镜实现全参数对齐 #

可以完整复刻带扩散半径的box-shadow效果，兼容性更好：

<svg width="250" height="250">
  <defs>
    <!-- 预留足够的渲染空间避免模糊被裁剪 -->
    <filter id="drop-shadow" x="-50%" y="-50%" width="200%" height="200%">
      <!-- 提取源元素透明通道并填充阴影颜色 -->
      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0  0 0 0 0 0.403  0 0 0 0 0.066  0 0 0 0.15 0" />
      <!-- 扩散层：当前spread为0可省略，如有非0值在此添加
      <feMorphology operator="dilate" radius="对应CSS的spread值" /> -->
      <!-- 模糊层：stdDeviation为CSS模糊值的1/2 -->
      <feGaussianBlur stdDeviation="12.5" />
      <!-- 偏移层：对应CSS的x/y偏移值 -->
      <feOffset dx="0" dy="10" result="offsetblur" />
      <!-- 按顺序叠加阴影和原始图形 -->
      <feMerge>
        <feMergeNode in="offsetblur" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>
  <circle cx="112.53" cy="112.53" r="87" fill="none" stroke="#74C947" stroke-width="25.53" style="filter: url(#drop-shadow);"></circle>
</svg>

关于直接给SVG加CSS box-shadow的说明 #

SVG矢量图形没有HTML元素的传统盒模型结构，受浏览器渲染逻辑限制，目前除少量实验性特性外，所有环境都不支持给SVG矢量元素直接应用CSS的box-shadow属性，仅支持基于矢量路径轮廓生成的drop-shadow类效果。

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