重复次数

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

浏览器兼容性