矢量文本图形-SVG专题教程 动画(1)

[Foreso]

动 画 (1)

1. 水平动画



源代码:

＜?xml version="1.0" encoding="utf-8"?＞
＜!-- Author : Blueknight,Hangzhou,China 2000 --＞
＜svg width="100" height="100"＞
＜rect y="45" width="10" height="10" style="fill: red"＞
＜animate attributeName="x" from="0" to="90" dur="10s"
repeatCount="indefinite"/＞
＜/rect＞
＜/svg＞



讲解:

　　首先绘制一个10*10的矩形,＜rect＞标签,起点在(0,45)处.然后使用＜animate .../＞对矩形对象进行动画.attributeName决定了运动的方向,from,to决定了在该方向上的起点和终点的坐标.dur是动画的延迟时间.repeatCount用于决定循环次数.indefinite是一个不确定值,它由DOM来决定,这里默认为无限.

能够进行动画的元素有
＜svg＞,＜g＞,＜defs＞,＜use＞,＜image＞,＜switch＞,
＜path＞,＜rect＞,＜circle＞,＜ellipse＞,＜line＞,
＜polyline＞,＜polygon＞,＜text＞,＜clipPath＞,
＜mask＞,＜a＞,＜foreignObject＞

[Foreso]

源代码:

＜?xml version="1.0" encoding="utf-8"?＞
＜!-- Author : Blueknight,Hangzhou,China 2000 --＞
＜svg width="100" height="100"＞
＜rect x="45" width="10" height="10" style="fill: red"＞
＜animate attributeName="y" from="0" to="90" dur="10s"
repeatCount="indefinite"/＞
＜/rect＞
＜/svg＞



讲解:

　　与水平动画相似,将attributeName换为控制竖直方向的y即可.

[Foreso]

源代码:

＜?xml version="1.0" encoding="utf-8"?＞
＜!-- Author : Blueknight,Hangzhou,China 2000 --＞
＜svg width="100" height="100"＞
＜rect width="10" height="10" style="fill: red"＞
＜animate attributeName="x" from="0" to="90" dur="10s"
repeatCount="indefinite"/＞
＜animate attributeName="y" from="0" to="90" dur="10s"
repeatCount="indefinite"/＞
＜/rect＞
＜/svg＞



讲解:

　　将水平动画和竖直动画复合,得到斜线 动画.