SVG repeatCount 属性

SVG（可缩放矢量图形）是一种用于在 Web 上创建矢量图形的 XML 标记语言。 repeatCount 属性是一个 SVG 动画属性，用于指定动画重复进行的次数。本篇文章将介绍 repeatCount 属性的语法、取值范围以及示例应用。

语法

repeatCount 属性使用以下语法：

<animate attributeName="属性名" 
         attributeType="XML"
         from="起始值" 
         to="终止值"
         dur="动画播放时间" 
         repeatCount="重复次数" />

其中，repeatCount 属性就是用于指定动画重复进行的次数。

取值范围

repeatCount 属性可以取以下值：

• 整数：用于指定动画重复的次数。如果不设置该属性，则默认只有一次重复播放。
• "indefinite"：用于指定动画无限次地重复进行，直到停止。

示例应用

以下是一个示例 SVG 动画，其中 repeatCount 属性设置为“3”，表示动画在播放 3 次后停止：

<svg width="200" height="200">
  <rect x="10" y="10" width="50" height="50">
    <animate attributeName="x" 
             attributeType="XML"
             from="10" 
             to="150"
             dur="1s" 
             repeatCount="3" />
  </rect>
</svg>

你可以在以下链接中查看该示例的演示效果：

SVG repeatCount 属性示例

除此之外，你还可以使用 repeatCount 属性将动画播放次数设置为无限次，示例如下：

<svg width="200" height="200">
  <rect x="10" y="10" width="50" height="50">
    <animate attributeName="x" 
             attributeType="XML"
             from="10" 
             to="150"
             dur="1s" 
             repeatCount="indefinite" />
  </rect>
</svg>

你可以在以下链接中查看该示例的演示效果：

SVG repeatCount 属性示例（无限重复播放）

以上就是 repeatCount 属性的介绍，希望能对你有所帮助！