SVG repeatDur 属性

SVG 的 repeatDur 属性用于定义动画的重复时间。如果您想控制动画在多长时间内重复播放，repeatDur 属性是必须的。

语法

<animate repeatDur="时长" … />

或

<animateMotion repeatDur="时长" … />

或

<animateTransform repeatDur="时长" … />

属性值

repeatDur 属性值可以是数字或者指定时间单位的数字，如下所述：

• 数字：重复动画的秒数。例如，repeatDur="5" 让动画重复 5 秒。
• s：表示秒。
• min：表示分钟。
• h：表示小时。

示例

以下示例展示了如何使用 repeatDur 属性，让动画重复播放 3 次，每次播放时长为 2 秒：

<svg width="100%" height="100%" viewBox="0 0 200 200">
  <rect x="10" y="10" width="50" height="50">
    <animate attributeName="x" from="10" to="150" dur="1s" repeatDur="6s" />
  </rect>
</svg>

注意事项

• repeatDur 属性仅在元素的 repeatCount 属性设置为 "indefinite" 时才有效，否则它被忽略。
• 如果 repeatDur 属性与 repeatCount 属性一起使用，则动画将在两者中的最早时间结束。
• 如果动画在 repeatDur 属性定义的时间内结束，则它不会重复播放。