实现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>

以上关于实现SVG图形的阴影效果的两种方法的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。