SVG 动画

动画元素用于动画 SVG 图形。动画元素最初在同步多媒体集成语言 (SMIL) 中定义。

在动画中，您必须指定属性的起始值和结束值、运动、颜色、动画开始时间和动画的持续时间。

示例

说明

width： 它是元素中的一个 XML 属性。

from： 它定义了属性的起始值。

to： 它定义了属性的结束值。

begin： 它定义动画的开始时间。

dur： 它定义动画的持续时间。

对单个对象进行多个动画

在这种类型的动画中，我们对单个对象执行多个动画。

示例

说明

• width 和 height 定义元素中的 XML 属性。
• from 定义矩形的宽度和高度从 20 乘 20 开始。
• to 定义矩形将在空间中增长到 250 乘 200。
• begin 定义动画的时间。
• dur 定义动画的持续时间。
• fill-opacity 使用 attributeType="CSS" 引用，因为它是在样式中设置的。
• 绿色的不透明度将增加前三秒，然后减少后三秒。

对多个对象的简单动画

您也可以对多个对象执行简单的动画。

示例

说明

width： 它是元素中的一个 XML 属性。

from： 它定义了属性的起始值。

to： 它定义了属性的结束值。

begin： 它定义动画的开始时间。

dur： 它定义动画的持续时间。