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

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

效果图

实现

要实现图形阴影的效果，会使用 filter 标签自定义显示行为。其中经常会用到以下几个标签 feOffset,feGaussianBlur, feComposite, 接下来我们详细解释一下它们的含义。

feOffset

feOffset 定义元素可以偏离原始元素的相对位置，如dx="5" dy="5"表示当前元素可以在 X 轴和 Y 轴上偏离其原始元素的距离为 5.

feGaussianBlur

feGaussianBlur高斯滤镜对输入图像进行高斯模糊，属性stdDeviation中指定的数量定义了模糊的程度。stdDeviation=5时的效果图如下：

feComposite

feComposite该滤镜执行两个输入图像的智能像素组合。in和in2表示两个输入的图形，mode 表示色彩叠加的方式，具体的值见链接。

SourceGraphic和SourceAlpha作为in属性的输入值，链接，表示图形元素自身将作原始输入。

代码部分

将上述属性组合起来就可以实现现图形阴影的效果，自定义filter，然后在图形上引用自定义的filter规则。

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

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1700px" height="270px" viewBox="0 0 1650 270" style="background-color: rgb(255, 255, 255);">
  <defs />
  <defs>
    <filter id="shadow" x="0" y="0" width="180%" height="180%">
      <feOffset in="SourceAlpha" dx="5" dy="5" result="offset"></feOffset>
      <feGaussianBlur in="offset" stdDeviation="5" result="blur"></feGaussianBlur>
      <feComposite in="SourceGraphic" in2="offset" mode="multiply"></feComposite>
    </filter>
  </defs>

  <rect fill="#ffffff" width="100%" height="100%" x="0" y="0" />
  <g>
    <g><ellipse id="e1" cx="100" cy="100" rx="50" ry="50" fill="#F5CB3A" stroke="#F5CB3A" pointer-events="all" filter="url(#shadow)"/></g>
  </g>
</svg>

二、使用 feDropShadow

在 SVG 中，有一个滤镜可以直接实现阴影效果，那就是feDropShadow

效果图：

代码

在 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>