持续时间

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

浏览器兼容性