SVG 动画可以使用 <animate> 元素创建。
实例
创建一个矩形，将在3秒内更改其位置，然后重复动画两次：
<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 属性。
<path> 元素用于定义一个路径。
下面的命令可用于路径数据：
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
注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
实例
<svg width="500" height="500"> <path d="M150 0 L75 200 L225 200 Z" /> </svg>
上面的例子定义了一条路径，它开始于位置150 0，到达位置75 200，然后从那里开始到225 200，最后在150 0关闭路径。