SVG 阴影

<defs>和<filter>

所有 SVG 过滤器均在<defs>元素。<defs> element 是 definitions 的缩写，包含特殊元素（例如过滤器）的定义。

这<filter>元素用于定义 SVG 过滤器。<filter> 元素具有必需的 id 属性，用于标识过滤器。然后图形指向要使用的过滤器。

SVG<feOffset>

示例 1

这<feOffset>元素用于创建阴影效果。其理念是获取 SVG 图形（图像或元素）并在 xy 平面上稍微移动它。

第一个例子偏移一个矩形（<feOffset> ），然后将原始图像与偏移图像混合（使用<feBlend> )：

以下是 SVG 代码：

代码解释：

• id 属性<filter>元素为过滤器定义一个唯一的名称
• 的过滤属性<rect>元素将元素链接到“f1”过滤器

示例 2

现在，偏移图像可以被模糊化（使用<feGaussianBlur> )：

以下是 SVG 代码：

代码解释：

• 的 stdDeviation 属性<feGaussianBlur>元素定义模糊量

示例 3

现在，将阴影变为黑色：

以下是 SVG 代码：

代码解释：

• 的 in 属性<feOffset>元素更改为“SourceAlpha”，它使用 Alpha 通道进行模糊处理，而不是整个 RGBA 像素

示例 4

现在，将阴影视为一种颜色：

以下是 SVG 代码：

代码解释：

• 这<feColorMatrix>滤镜用于将偏移图像中的颜色转换为更接近黑色的颜色。矩阵中的三个“0.2”值都乘以红色、绿色和蓝色通道。降低它们的值会使颜色更接近黑色（黑色为 0）