热搜: fiddler git ip 代理
历史搜索

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

游客2024-08-25 07:30:01
目录文章目录
  1. 一、自定义 filter 实现 svg 的阴影效果
  2. 二、使用 feDropShadow

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

效果图

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

代码

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