重複次數

Baseline 已廣泛支援

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

repeatCount 屬性指示動畫將執行的次數。

你可以將此屬性與以下 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="5" />
  </rect>
  <rect x="120" y="0" width="100" height="100">
    <animate
      attributeType="XML"
      attributeName="y"
      from="0"
      to="50"
      dur="1s"
      repeatCount="indefinite" />
  </rect>
</svg>

用法說明

<number> | indefinite
預設值 None
可動畫的
<number>

此值指定迭代次數。它可以包含表示為分數值的區域性迭代。分數表示簡單持續時間的一部分。值必須大於 0

indefinite

此值表示動畫將無限重複(即,直到文件結束)。

規範

規範
SVG 動畫級別 2
# RepeatCountAttribute

瀏覽器相容性