SVG 小技巧：CSS filter:drop-shadow 妙用

SVG（Scalable Vector Graphics）作为一种基于XML的矢量图形格式，因其可缩放、不失真以及易于交互的特性，在网页设计中越来越受到青睐。然而，仅仅依靠SVG本身可能无法满足我们对图形美观度的全部需求。此时，CSS的filter属性就显得尤为重要，特别是其中的drop-shadow()函数，它可以为SVG元素添加阴影效果，极大地丰富了SVG的视觉效果。

CSS filter:drop-shadow 基础知识

CSS的filter属性允许我们对元素应用各种图形效果，如模糊、亮度调整、色彩调整等。其中的drop-shadow()函数则是专门用于添加阴影效果的。drop-shadow()函数的基本语法如下：

filter: drop-shadow(h-offset v-offset blur spread color);

• h-offset：水平阴影的位置，正值向右，负值向左。
• v-offset：垂直阴影的位置，正值向下，负值向上。
• blur：阴影的模糊程度，值越大阴影边缘越模糊。
• spread：阴影的大小，正值会扩大阴影，负值会缩小阴影。
• color：阴影的颜色。

drop-shadow() 在SVG中的妙用

1. 添加基础阴影

使用drop-shadow()函数为SVG图形添加阴影是最基础的应用。通过调整h-offset、v-offset、blur和spread等参数，可以轻松地实现各种阴影效果。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect width="100" height="100" style="fill:blue;filter:drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));"/>
</svg>

2. 创建立体效果

通过为SVG元素的不同面应用不同的drop-shadow()效果，可以模拟出立体效果。例如，为一个立方体的各个面分别添加不同方向和模糊程度的阴影，可以使其看起来更加立体。

<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
  <!-- 绘制立方体的各个面，并分别应用不同的阴影效果 -->
</svg>

3. 实现动态阴影效果

结合CSS动画和transition属性，可以实现动态变化的阴影效果，为SVG图形增添动感。例如，可以通过动画改变阴影的位置或模糊程度，让阴影动起来。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect width="100" height="100" style="fill:blue;filter:drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));animation: moving-shadow 2s infinite;"/>
  @keyframes moving-shadow {
    0% { filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)); }
    50% { filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.5)); }
    100% { filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)); }
  }
</svg>

4. 与其他CSS属性结合使用

drop-shadow()函数还可以与其他CSS属性（如transform、transition等）结合使用，创造出更加复杂和丰富的视觉效果。例如，可以通过变换元素的位置和大小，同时改变阴影效果，实现更加自然的阴影过渡。

总结

CSS的drop-shadow()函数为SVG图形提供了强大的阴影效果支持，通过灵活应用该函数，我们可以轻松地实现各种美观且富有创意的视觉效果。无论是基础的阴影添加、立体效果的模拟，还是动态阴影的创建，drop-shadow()函数都能为我们提供有力的帮助。在未来的SVG设计中，不妨多多尝试使用drop-shadow()函数，为你的作品