CSS 为 SVG 添加过滤器，轻松搞定

一步步教你用 CSS 为 SVG 添加过滤器

SVG（可缩放矢量图形）是一种功能强大的图像格式，在网页设计中应用广泛。与传统的位图格式（如 JPEG 和 PNG）不同，SVG 图像是基于矢量的，这意味着它们可以无限缩放而不会损失质量。此外，SVG 图像还可以被编辑和动画化，使其成为网页设计的理想选择。

CSS 过滤器是一种强大的工具，可以用来对 SVG 图像进行各种各样的效果处理，如模糊、发光、阴影等。通过使用 CSS 过滤器，我们可以轻松地创建出令人惊叹的视觉效果，而无需使用复杂的图像编辑软件。

如何为 SVG 图像添加过滤器

1. 创建 SVG 图像

首先，我们需要创建一个 SVG 图像。我们可以使用任何文本编辑器或 SVG 编辑软件来创建 SVG 图像。如果你是刚开始接触 SVG，我建议你使用 Inkscape 等免费的 SVG 编辑软件。

2. 将 SVG 图像添加到 HTML 代码中

一旦你创建了 SVG 图像，就可以将它添加到 HTML 代码中了。你可以使用 <img> 标签或 <object> 标签来添加 SVG 图像。

3. 为 SVG 图像添加 CSS 过滤器

现在，我们可以为 SVG 图像添加 CSS 过滤器了。我们可以使用 filter 属性来添加 CSS 过滤器。filter 属性的值可以是单个过滤器，也可以是多个过滤器的组合。

例如，以下 CSS 代码可以为 SVG 图像添加一个模糊过滤器：

img {
  filter: blur(5px);
}

上面的代码将使 SVG 图像变得模糊，模糊半径为 5 像素。

我们可以使用多种不同的 CSS 过滤器来创建各种各样的效果。例如，我们可以使用 drop-shadow 过滤器来为 SVG 图像添加阴影，或者使用 grayscale 过滤器来使 SVG 图像变成灰度图。

使用 SVG 过滤器创建动画

CSS 过滤器还可以用来创建动画。我们可以使用 @keyframes 规则来创建 CSS 动画，然后将动画应用于 SVG 图像。

例如，以下 CSS 代码可以为 SVG 图像创建一个旋转动画：

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

img {
  animation: rotate 2s infinite;
}

上面的代码将使 SVG 图像旋转 360 度，动画持续时间为 2 秒，动画将无限循环。

结语

CSS 过滤器是一种强大的工具，可以用来创建各种各样的视觉效果。通过使用 CSS 过滤器，我们可以轻松地为 SVG 图像添加模糊、发光、阴影等效果，甚至可以创建动画。