矢量文本图形-SVG专题教程 动画(2)
源代码:
<?xml version="1.0" encoding="utf-8"?>
<!-- Author : Blueknight,Hangzhou,China 2000 -->
<svg width="100" height="100">
<g transform="translate(50,0)">
<rect x="50" width="10" height="10" style="fill: red">
<animateTransform attributeName="transform" type="rotate"
from="0" to="180" dur="5s" repeatCount="indefinite"/>
</rect>
</g>
</svg>
讲解:
<g transform="translate(50,0)"></g>用于圆周运动的中心点调整.<rect>绘制一个矩形,然后利用<animateTransform .../>标签完成圆周运动.其中的attributeName用于决定运动的属性,type决定运动的类型,from,to决定运动的起始角度(这里根据不同的运动类型,数值有不同的含义).dur用于决定运动的持续时间,repeatCount决定循环次数.