如何创建 SVG 投影阴影？

投影阴影通过赋予 SVG 3D 效果或立体感，提升了外观，SVG 投影阴影可以使用 SVG 滤镜以及盒阴影或滤镜属性来创建。

  • SVG 滤镜：提供对阴影属性的细粒度控制。
  • CSS 盒阴影或滤镜：使用更简单的语法应用阴影。

创建 SVG 投影阴影的方法

在 SVG 中使用 <filter> 元素

这是一种功能强大的方法，允许对阴影效果进行详细控制，包括模糊、偏移和颜色调整，SVG 滤镜定义应用于元素的图形效果，而 <feDropShadow> 滤镜原语简化了投影阴影的创建。

示例代码

<!DOCTYPE html>
<html>

<head>
    <title>Title of the document</title>
</head>

<body>
    <svg width="200" height="200"
         xmlns="http://www.w3.org/2000/svg">
        <defs>
            <filter id="dropShadow" x="0" y="0" 
                    width="200%" height="200%">
                <feDropShadow dx="5" dy="5" stdDeviation="4" 
                              flood-color="black" flood-opacity="0.5" />
            </filter>
        </defs>
        <circle cx="50" cy="50" r="40" fill="green" 
                filter="url(#dropShadow)" />
    </svg>
</body>

</html>

输出

SVG Drop Shadow

使用 CSS 滤镜

可以将 CSS 滤镜：投影阴影；应用于 SVG 元素，滤镜：投影阴影 CSS 属性比使用 SVG 滤镜简单，并可通过 CSS 样式表或样式属性直接应用。

示例代码

<!DOCTYPE html>
<html>

<head>
    <title>Title of the document</title>
</head>

<body>
    <svg width="200" height="200" 
         xmlns="http://www.w3.org/2000/svg">
        <circle cx="50" cy="50" r="40" fill="green" 
                style="filter: drop-shadow(5px 5px 4px rgba(0,0,0,0.5));" />
    </svg>
</body>

</html>

输出

SVG Drop Shadow

更新于：2024-11-22

3 浏览

启动你的 职业

完成课程后即可获得认证

开始使用
广告