SVG 模糊效果

SVG (Scalable Vector Graphics) 是一种基于 XML 的矢量图形格式，可用于创建高质量的图形和动画。SVG 中提供了多种滤镜效果，其中包括模糊效果。本文将介绍如何在 SVG 中使用模糊效果。

模糊效果的使用方法

SVG 中提供了两种模糊效果：高斯模糊和平均模糊。

高斯模糊

高斯模糊是一种模糊算法，可模拟出物体在现实中的模糊效果。在 SVG 中，可以通过在 <filter> 标签中添加 <feGaussianBlur> 子标签来实现高斯模糊效果。

代码示例:

<svg width="200" height="200">
  <defs>
    <filter id="blur">
      <feGaussianBlur stdDeviation="5" />
    </filter>
  </defs>
  <circle cx="100" cy="100" r="50" filter="url(#blur)" />
</svg>

在以上代码中，我们首先定义了一个名为 blur 的滤镜，其中添加了 stdDeviation 属性用于指定模糊半径为 5。然后，在 circle 标签中添加了 filter 属性并指向了我们刚刚定义的滤镜，这样就会在圆形周围产生一个模糊效果。

渲染结果：

平均模糊

平均模糊是一种简单的模糊算法，可将图像中每个像素的颜色值转换为周围像素的平均值。在 SVG 中，可以通过在 <filter> 标签中添加 <feConvolveMatrix> 子标签来实现平均模糊效果。

代码示例:

<svg width="200" height="200">
  <defs>
    <filter id="blur">
      <feConvolveMatrix order="3" kernelMatrix="1 1 1 1 1 1 1 1 1" />
    </filter>
  </defs>
  <circle cx="100" cy="100" r="50" filter="url(#blur)" />
</svg>

在以上代码中，我们首先定义了一个名为 blur 的滤镜，其中添加了 order 属性用于指定卷积核的大小为 3x3，添加了 kernelMatrix 属性用于指定卷积核矩阵为 [1 1 1 1 1 1 1 1 1]。然后，在 circle 标签中添加了 filter 属性并指向了我们刚刚定义的滤镜，这样就会在圆形周围产生一个模糊效果。

渲染结果：

总结

本文介绍了 SVG 中的两种模糊效果：高斯模糊和平均模糊。通过使用滤镜来实现这些效果，我们可以轻松地为 SVG 图像添加各种效果。