首页课程HTML Fun ClassHTML5 SVG Animations & Paths

HTML5 SVG Animations & Paths

目录列表

SVG 动画

SVG 动画可以使用 <animate> 元素创建。

实例

创建一个矩形,将在3秒内更改其位置,然后重复动画两次:

1

2

3

4

5

6

<svg width="1000" height="250">

<rect width="150" height="150" fill="orange">

  <animate attributeName="x" from="0" to="300"

    dur="3s" fill="freeze" repeatCount="2"/> 

</rect>

</svg>

attributeName:指定哪个属性需要产生动画效果

from:指定属性的起始值

to:指定属性的结束值

dur:指定动画运行的时间(持续时间)

fill=“freeze|remove”:指定动画播放完毕后是停留在播放的终点还是回到起始位置

repeatCount:指定动画的重复播放次数


在上面的例子中,矩形在3秒内将其x属性从0更改为300。

要无限重复动画,请使用值 “indefinite” 作为 repeatCount 属性。


SVG 动画可以使用什么元素创建?

SVG 路径

<path> 元素用于定义一个路径。

下面的命令可用于路径数据:

1

2

3

4

5

6

7

8

9

M = moveto

L = lineto

H = horizontal lineto

V = vertical linetoC = curveto

S = smooth curveto

Q = quadratic Bézier curve

T = smooth quadratic Bézier curveto

A = elliptical Arc

Z = closepath

注意:以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。

实例

1

2

3

<svg width="500" height="500">

  <path d="M150 0 L75 200 L225 200 Z" />

</svg>

上面的例子定义了一条路径,它开始于位置150 0,到达位置75 200,然后从那里开始到225 200,最后在150 0关闭路径。


什么标签用于定义一个 SVG 路径?