持續時間

Baseline 已廣泛支援

此特性已相當成熟,可在許多裝置和瀏覽器版本上使用。自 ⁨2020 年 1 月⁩ 起,所有主流瀏覽器均已支援。

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.iiimm:ss.iii

媒體

此值指定簡單持續時間為內在媒體持續時間。這僅對定義媒體的元素有效。(對於 動畫元素,如果指定了 media,則將忽略該屬性。)

indefinite

此值指定簡單持續時間為無限。

注意:如果簡單持續時間為無限,則 插值 將不起作用(儘管這對於 <set> 元素仍然有用)。

規範

規範
SVG 動畫級別 2
# DurAttribute

瀏覽器相容性