CSS SVG填充动画

在本文中，我们将介绍如何使用CSS创建SVG填充动画来使给定路径产生动态效果。

阅读更多：CSS 教程

什么是SVG填充动画？

SVG（Scalable Vector Graphics）是一种基于XML的标记语言，用于描述二维矢量图形。SVG填充动画是指通过CSS动画来改变SVG图形的填充颜色或图案，从而产生动态的效果。

CSS动画基础

在介绍SVG填充动画之前，我们先来了解一下CSS动画的基本知识。

CSS动画通过@keyframes规则定义关键帧，通过将关键帧应用到元素上来实现动画效果。下面是一个简单的例子：

@keyframes example {
  from { background-color: red; }
  to { background-color: yellow; }
}

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: example 2s linear infinite;
}

在上面的例子中，我们定义了一个名为example的关键帧动画，其中from表示动画的开始状态，to表示动画的结束状态。然后，我们将这个动画应用到一个div元素上，并设置动画的持续时间为2秒，动画速度为线性，动画循环无限次。

CSS SVG填充动画示例

现在，我们来看一个具体的例子，使用CSS动画实现SVG填充动画效果。

假设我们有一个简单的SVG图形，如下所示：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect width="200" height="200" fill="none" stroke="black" stroke-width="2"/>
  <circle cx="100" cy="100" r="50" fill="none" stroke="black" stroke-width="2"/>
</svg>

这个SVG图形由一个矩形和一个圆组成，初始状态下都是没有填充色的。

现在，我们想要给这个SVG图形添加一个填充动画效果，让它的填充色由无到有渐变。我们可以通过以下步骤来实现：