SVG 模糊效果

SVG 中的模糊效果可以通过 <feGaussianBlur> 元素实现，该元素使用高斯模糊算法来模糊图像。

模糊效果可以用于创建柔和的阴影、景深效果、模糊背景等各种视觉效果。

<feGaussianBlur> 元素：

<feGaussianBlur> 元素用于对图像进行高斯模糊处理，它有两个主要参数：

• stdDeviation：指定高斯模糊的标准差。标准差越大，模糊程度越高。可以使用一个或两个数字，分别表示水平和垂直方向的标准差。如果只提供一个数字，则水平和垂直方向的标准差相同。

• in：指定输入图像，通常为 SourceGraphic，表示应用滤镜效果的目标元素本身。

以下代码定义了一个模糊滤镜，然后将其应用于一个红色填充的矩形，使矩形呈现出模糊的效果，stdDeviation="5" 表示水平和垂直方向的标准差均为 5，即模糊程度为 5 个像素。

实例 1

<feGaussianBlur> 元素是用于创建模糊效果：

下面是SVG代码：

点击查看：查看 SVG 文件。

代码解析：

• <filter>元素id属性定义一个滤镜的唯一名称
• <feGaussianBlur>元素定义模糊效果
• in="SourceGraphic"这个部分定义了由整个图像创建效果
• stdDeviation属性定义模糊量
• <rect>元素的滤镜属性用来把元素链接到"f1"滤镜

注意事项

• 可以将模糊效果应用于任何SVG图形元素，包括矩形、圆形、路径等。

• 模糊效果的参数 stdDeviation 可以根据需要进行调整，以获得适合的模糊程度。

• 模糊效果可以与其他滤镜效果组合使用，例如阴影、混合模式等。

通过使用 <feGaussianBlur> 元素，你可以为SVG图形元素添加模糊效果，使其呈现出柔和、模糊的外观，从而实现各种视觉效果。