SVG 中可以通过使用 <filter> 元素来添加阴影效果。常见的阴影效果包括 feDropShadow 滤镜。以下是一个简单的SVG示例,演示如何在一个矩形元素上添加阴影效果:
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <!-- 创建一个阴影效果 -->
  <defs>
    <filter id="shadowFilter" x="0" y="0" width="150%" height="150%">
      <feDropShadow dx="5" dy="5" stdDeviation="5" flood-color="black" />
    </filter>
  </defs>

  <!-- 在矩形元素上应用阴影效果 -->
  <rect x="20" y="20" width="150" height="60" fill="blue" filter="url(#shadowFilter)" />
</svg>

在这个例子中,<filter> 元素定义了一个名为 "shadowFilter" 的滤镜,其中使用了 <feDropShadow> 来实现阴影效果。dx 和 dy 属性表示阴影的水平和垂直偏移,stdDeviation 属性表示阴影的模糊程度,flood-color 属性表示阴影的颜色。

然后,矩形元素 <rect> 使用 filter 属性引用了这个滤镜,从而在矩形上应用了阴影效果。

你可以根据需要调整 <feDropShadow> 元素的属性来改变阴影的位置、模糊程度和颜色。


转载请注明出处:http://www.pingtaimeng.com/article/detail/12389/SVG