SVG 阴影效果详解

SVG 阴影效果详解

SVG（Scalable Vector Graphics，可缩放矢量图形）是一种基于XML的图像格式，用于在网络上显示二维图形。与传统的位图图像（如PNG和JPEG）不同，SVG图像可以无限放大而不失真，因为它们是由直线和曲线描述的数学图形，而不是像素点。在SVG中，可以使用多种方式创建阴影效果，以增强图形的视觉效果和深度感。

一、SVG 阴影效果的基本概念

SVG中的阴影效果通常是通过<filter>元素实现的。<filter>元素定义了一个图形效果的滤镜，它可以应用于SVG图形的各种元素，如矩形、圆形、路径等。滤镜效果可以通过filter属性应用于目标元素。

1.1 <filter>元素

<filter>元素通常包含一个或多个滤镜函数，如<feGaussianBlur>（高斯模糊）、<feOffset>（偏移）、<feColorMatrix>（颜色矩阵）等。这些函数组合起来可以创建复杂的阴影效果。

1.2 filter属性

要应用滤镜效果，需要在目标元素上使用filter属性，并将其值设置为<filter>元素的id属性值。例如：

<filter id="my-shadow">
  &