在SVG中,你可以使用<filter>元素来添加阴影效果。以下是一个简单的SVG代码示例,演示如何在一个矩形上应用阴影效果:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 创建一个矩形 -->
  <rect width="150" height="150" fill="#3498db" />

  <!-- 应用阴影滤镜 -->
  <filter id="shadowFilter" x="-20%" y="-20%" width="140%" height="140%">
    <feDropShadow dx="5" dy="5" stdDeviation="5" flood-color="#000000" />
  </filter>

  <!-- 使用滤镜效果 -->
  <rect width="150" height="150" fill="#e74c3c" filter="url(#shadowFilter)" />
</svg>

在上面的示例中,我们创建了一个蓝色的矩形,然后应用了一个名为"shadowFilter"的阴影滤镜。这个滤镜通过feDropShadow元素实现,其中的dx和dy属性分别表示阴影的水平和垂直偏移,stdDeviation属性表示阴影的模糊程度,而flood-color属性表示阴影的颜色。

最后,我们创建了一个红色的矩形,并在其上应用了之前定义的阴影滤镜,从而使该矩形显示阴影效果。

你可以根据需要调整矩形的大小、颜色以及阴影滤镜的参数来满足你的设计需求。


转载请注明出处:http://www.zyzy.cn/article/detail/14679/SVG