SVG 模糊效果学习笔记

SVG（Scalable Vector Graphics）是一种基于XML的标准，用于描述二维图形和相关的动画效果。其中，SVG模糊效果是通过对SVG元素进行滤镜处理实现的。

SVG模糊效果简介

SVG模糊效果常用于图形、文本或其他SVG元素的视觉增强，从而使它们看起来更柔和、更自然。SVG模糊效果通常包括高斯模糊、平均模糊、运动模糊等不同类型的模糊操作。

高斯模糊

高斯模糊是最常用的一种SVG模糊效果，它使用高斯函数对SVG元素进行模糊处理。下面是一个简单的高斯模糊实例：

xmlCopy Code
<svg width="400" height="400">
  <defs>
    <filter id="blur">
      <feGaussianBlur stdDeviation="3" />
    </filter>
  </defs>

  <circle cx="200" cy="200" r="100" fill="#ff0000" filter="url(#blur)" />
</svg>

在上述代码中，我们首先定义了一个名为“blur”的滤镜，其中的feGaussianBlur元素表示应用高斯模糊，stdDeviation属性表示模糊半径。接着，我们将这个滤镜应用在一个半径为100的红色圆形上。

平均模糊

平均模糊是一种简单的SVG模糊效果，它将每个像素周围的颜色值求平均并应用于该像素，从而实现模糊效果。下面是一个平均模糊实例：

xmlCopy Code
<svg width="400" height="400">
  <defs>
    <filter id="blur">
      <feConvolveMatrix kernelMatrix="1 1 1 1 1 1 1 1 1" divisor="9" />
    </filter>
  </defs>

  <rect x="100" y="100" width="200" height="200" fill="#00ff00" filter="url(#blur)" />
</svg>

在上述代码中，我们定义了一个名为“blur”的滤镜，其中的feConvolveMatrix元素表示应用平均模糊，kernelMatrix属性表示卷积核。最后，我们将这个滤镜应用在一个绿色矩形上。

运动模糊

运动模糊是一种特殊的SVG模糊效果，它模拟了运动过程中的模糊效果。下面是一个运动模糊实例：

xmlCopy Code
<svg width="400" height="400">
  <defs>
    <filter id="blur">
      <feGaussianBlur stdDeviation="3" />
    </filter>
    <filter id="motion">
      <feOffset dx="0" dy="0" result="offset" />
      <feGaussianBlur stdDeviation="3" result="blur" />
      <feComposite operator="in" in="SourceGraphic" in2="blur" />
    </filter>
  </defs>

  <circle cx="200" cy="200" r="100" fill="#0000ff" filter="url(#motion)" />
</svg>

在上述代码中，我们首先定义了一个名为“blur”的高斯模糊滤镜，以及一个名为“motion”的运动模糊滤镜。其中，“motion”滤镜包括三个元素：feOffset表示偏移量，feGaussianBlur表示高斯模糊，feComposite表示合成操作。最后，我们将这个滤镜应用在一个半径为100的蓝色圆形上。

结语

以上是SVG模糊效果的三种常见实现方式。通过这篇学习笔记，你已经掌握了如何实现SVG模糊效果的方法，并可以在自己的SVG图形中应用它们。