SVG 动画

SVG 动画

SVG 元素可以进行动画。

在 SVG 中，我们有四个动画元素可以设置或动画化 SVG 图形

• <set>
• <animate>
• <animateTransform>
• <animateMotion>

SVG <set>

<set> 元素在指定持续时间内设置属性的值。

在本例中，我们创建一个红色圆形，其初始半径为 25，3 秒后半径将设置为 50。

以下是 SVG 代码

代码解释

• <set> 元素中的 attributeName 属性定义要更改的属性。
• <set> 元素中的 to 属性定义属性的新值。
• <set> 元素中的 begin 属性定义动画应何时开始。

SVG <animate>

<animate> 元素动画化元素的属性。

<animate> 元素应该嵌套在目标元素内。

在本例中，我们创建一个红色圆形。我们动画化 cx 属性，从 50 到 90%。这意味着圆形将从左向右移动。

以下是 SVG 代码

代码解释

• attributeName 属性定义要动画化的属性。
• begin 属性定义动画应何时开始。
• dur 属性定义动画的持续时间。
• from 属性定义起始值。
• to 属性定义结束值。
• repeatCount 属性定义动画应播放多少次。

SVG <animate> 冻结

在本例中，我们希望红色圆形在到达其最终位置时冻结（停止）（而不是立即返回到起始位置）。

以下是 SVG 代码

代码解释

• fill="freeze" 属性定义动画在到达其最终位置时应冻结。

SVG <animateTransform>

<animateTransform> 元素动画化目标元素上的 transform 属性。

<animateTransform> 元素应该嵌套在目标元素内。

在本例中，我们创建一个将旋转的红色矩形。

以下是 SVG 代码

代码解释

• attributeName 属性动画化 <rect> 元素的 transform 属性。
• begin 属性定义动画应何时开始。
• dur 属性定义动画的持续时间。
• type 属性定义变换的类型。
• from 属性定义起始值。
• to 属性定义结束值。
• repeatCount 属性定义动画应播放多少次。

SVG <animateMotion>

<animateMotion> 元素设置元素沿运动路径移动的方式。

<animateMotion> 元素应该嵌套在目标元素内。

在本例中，我们创建一个矩形和一个文本。这两个元素都具有相同的路径的 <animateMotion> 元素。

以下是 SVG 代码

代码解释

• path 属性定义动画的路径。
• begin 属性定义动画应何时开始。
• dur 属性定义动画的持续时间。
• repeatCount 属性定义动画应播放多少次。