CSS 如何在SVG路径元素上添加阴影

在本文中，我们将介绍如何在SVG路径元素上添加阴影效果。SVG（Scalable Vector Graphics）是一种用于显示矢量图形的XML文件格式，而阴影效果能够使图形在页面上更加突出和有层次感。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

使用CSS的drop-shadow属性添加阴影

要在SVG路径元素上添加阴影效果，可以使用CSS的drop-shadow属性。这个属性可以在元素周围创建一个投影效果，使元素看起来浮起来，给人一种立体感。下面是一个示例代码：

path {
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
}

在上面的代码中，我们为path元素添加了一个阴影效果。drop-shadow属性接受四个参数：水平偏移量、垂直偏移量、模糊半径和颜色。在示例代码中，阴影的水平偏移量为2px，垂直偏移量为2px，模糊半径为4px，颜色为rgba(0, 0, 0, 0.5)即半透明黑色。

示例说明

接下来，我们将通过一个示例说明如何在SVG路径元素上添加阴影效果。假设我们有一个简单的SVG路径，它描述了一个圆形。

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <path d="M100 10 190 100 100 190 10 100z" fill="none" stroke="black" stroke-width="2" />
</svg>

以上代码创建了一个200×200像素大小的SVG画布，并在画布中绘制了一个圆形。现在，我们希望给这个圆形添加一个阴影效果。

首先，我们需要将SVG路径元素的filter属性设置为drop-shadow。具体代码如下：

path {
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
}

将以上代码添加到文档的CSS样式中后，圆形将获得一个水平偏移量为2px，垂直偏移量为2px的阴影效果。阴影的模糊半径为4px，颜色为半透明黑色。

总结

通过使用CSS的drop-shadow属性，我们可以在SVG路径元素上添加阴影效果，使图形更加突出和有层次感。只需通过设置filter属性为drop-shadow，并指定阴影的水平偏移量、垂直偏移量、模糊半径和颜色，就能实现这个效果。希望本文对您了解如何在SVG路径元素上添加阴影有所帮助。