实现SVG图形的阴影效果的两种方法

1. 一、自定义 filter 实现 svg 的阴影效果
• 效果图
• 实现
• 代码部分
2. 二、使用 feDropShadow
• 代码

一、自定义 filter 实现 svg 的阴影效果

效果图

代码

在 filter 中使用滤镜feDropShadow，

• dx：此属性定义了投影的 x 轴偏移量
• dy：此属性定义了投影的 y 轴偏移量
• stdDeviation： 此属性定义了投影的模糊操作的标准差

在此附上效果图中的原始代码以供参考：

<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="shadow">
      <feDropShadow dx="0.2" dy="0.4" stdDeviation="0.2" />
    </filter>
  </defs>
  <circle cx="5" cy="50%" r="2.5" style="fill:pink; filter:url(#shadow);" />
</svg>