dur

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

此值将简单持续时间指定为内在媒体持续时间。这仅对定义媒体的元素有效。(对于 动画元素,如果指定了 media,则将忽略该属性。)

indefinite

此值将简单持续时间指定为无限。

注意: 如果简单持续时间是无限的,则 插值 将不起作用(尽管这对于 <set> 元素仍然有用)。

规范

规范
SVG 动画级别 2
# DurAttribute

浏览器兼容性

BCD 表格仅在浏览器中加载