SVG 模糊效果

SVG 模糊效果

SVG（Scalable Vector Graphics，可缩放矢量图形）是一种基于XML的图像格式，用于描述二维图形。它是一种矢量图形格式，因此可以无限放大而不失真。SVG广泛应用于网页设计、动画制作和图形编辑等领域。本文将介绍SVG中的一种常见效果——模糊效果。

什么是SVG模糊效果？

SVG模糊效果是通过SVG滤镜实现的，它可以给图形添加模糊效果，使图形呈现出朦胧的美感。SVG滤镜是一种强大的图像处理工具，可以创建各种视觉效果，包括模糊、阴影、光照等。

如何实现SVG模糊效果？

在SVG中，可以使用<filter>元素创建模糊效果。<filter>元素定义了一个滤镜，可以通过id属性为其指定一个唯一的标识符。然后，在需要应用模糊效果的图形元素上，通过filter属性引用该滤镜。

下面是一个简单的SVG模糊效果示例：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <filter id="blur">
    <feGaussianBlur stdDeviation="5" />
  </filter>
  <rect x="50" y="50" width="100" height="100" fill="blue" filter=