持續時間
dur 屬性指示動畫的簡單持續時間。
你可以將此屬性與以下 SVG 元素一起使用
示例
html
<svg viewBox="0 0 220 150" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100" height="100">
<animate
attributeType="XML"
attributeName="y"
from="0"
to="50"
dur="1s"
repeatCount="indefinite" />
</rect>
<rect x="120" y="0" width="100" height="100">
<animate
attributeType="XML"
attributeName="y"
from="0"
to="50"
dur="3s"
repeatCount="indefinite" />
</rect>
</svg>
用法說明
| 值 |
<clock-value> | media | indefinite |
|---|---|
| 預設值 | indefinite |
| 可動畫的 | 否 |
<clock-value>-
此值指定簡單持續時間的長度。該值必須大於 0,並可以表示為小時 (
h)、分鐘 (m)、秒 (s) 或毫秒 (ms)。可以組合這些時間表示來建立複雜的持續時間,例如hh:mm:ss.iii或mm:ss.iii。 媒體-
此值指定簡單持續時間為內在媒體持續時間。這僅對定義媒體的元素有效。(對於 動畫元素,如果指定了
media,則將忽略該屬性。) indefinite-
此值指定簡單持續時間為無限。
規範
| 規範 |
|---|
| SVG 動畫級別 2 # DurAttribute |
瀏覽器相容性
載入中…