SVG 动画教程

SVG 动画是网页设计中一个非常有用的功能，它可以让静态的 SVG 图像动起来，增加页面的互动性和趣味性。

基础概念

在开始学习 SVG 动画之前，我们需要了解一些基础概念：

SVG (Scalable Vector Graphics): 可缩放矢量图形，是一种基于可扩展标记语言（XML）的图形存储格式。
SMIL (Synchronized Multimedia Integration Language): 一种用于在 SVG 中创建动画的语言。

动画类型

SVG 动画主要分为以下几种类型：

基本动画：包括移动、缩放、旋转等。
路径动画：沿着指定路径移动的动画。
关键帧动画：通过定义关键帧来控制动画的进程。

示例

以下是一个简单的 SVG 移动动画示例：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="50" fill="red">
    <animate attributeName="cx" from="0" to="200" dur="2s" fill="freeze" />
  </circle>
</svg>

这个动画会使红色的圆圈从左到右移动。

扩展阅读

想要了解更多关于 SVG 动画的知识，可以阅读以下教程：

图片