20、SVG动画、脚本与文本处理全解析

SVG动画、脚本与文本处理全解析

1. SVG动画基础

SVG不仅可以创建静态单帧文档，还能用于制作动画，就像Flash一样。它通过四种动画标签来实现，这些标签是万维网联盟复杂的SMIL标准的演进。以下是四种动画标签及其功能：
- <animate> ：用于在一段时间内修改元素的特定属性。例如，下面的代码使圆在10秒内扩大到原来的5倍大小：

<circle id="ball" r="10" fill="#FF0000">
  <animate attributeName="r" from="10" to="50" dur="10s"/>
</circle>

• <animateMotion> ：用于使元素在一段时间内沿着预定义的路径移动。
• <animateColor> ：用于对指定元素应用颜色变换。
• <animateTransform> ：可对元素执行多种变换。

<animateMotion> 元素有多个属性，如下表所示：
| 属性 | 描述 |
| — | — |
| dur | 动画的持续时间，可使用从毫秒到小时的时间单位（ms、s、min、h）。 |
| path