SVG 動(dòng)畫可以使用 <animate> 元素創(chuàng)建。

實(shí)例

創(chuàng)建一個(gè)矩形，將在3秒內(nèi)更改其位置，然后重復(fù)動(dòng)畫兩次：

<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：指定哪個(gè)屬性需要產(chǎn)生動(dòng)畫效果

from：指定屬性的起始值

to：指定屬性的結(jié)束值

dur：指定動(dòng)畫運(yùn)行的時(shí)間（持續(xù)時(shí)間）

fill=“freeze|remove”：指定動(dòng)畫播放完畢后是停留在播放的終點(diǎn)還是回到起始位置

repeatCount：指定動(dòng)畫的重復(fù)播放次數(shù)

在上面的例子中，矩形在3秒內(nèi)將其x屬性從0更改為300。

要無(wú)限重復(fù)動(dòng)畫，請(qǐng)使用值 “indefinite” 作為 repeatCount 屬性。

<path> 元素用于定義一個(gè)路徑。

下面的命令可用于路徑數(shù)據(jù)：

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

注意：以上所有命令均允許小寫字母。大寫表示絕對(duì)定位，小寫表示相對(duì)定位。

實(shí)例

<svg width="500" height="500">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>

上面的例子定義了一條路徑，它開始于位置150 0，到達(dá)位置75 200，然后從那里開始到225 200，最后在150 0關(guān)閉路徑。