dur

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Das dur-Attribut gibt die einfache Dauer einer Animation an.

Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:

Beispiel

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>

Anwendungshinweise

Wert <clock-value> | media | indefinite
Standardwert indefinite
Animierbar Nein
<clock-value>

Dieser Wert gibt die Länge der einfachen Dauer an. Der Wert muss größer als 0 sein und kann in Stunden (h), Minuten (m), Sekunden (s) oder Millisekunden (ms) angegeben werden. Es ist möglich, diese Zeitangaben zu kombinieren, um komplexe Dauern wie hh:mm:ss.iii oder mm:ss.iii zu erstellen.

media

Dieser Wert gibt die einfache Dauer als die intrinsische Mediendauer an. Dies ist nur für Elemente gültig, die Medien definieren. (Für Animationselemente wird das Attribut ignoriert, wenn media angegeben ist.)

indefinite

Dieser Wert gibt die einfache Dauer als unbestimmt an.

Hinweis: Die Interpolation funktioniert nicht, wenn die einfache Dauer unbestimmt ist (obwohl dies für <set>-Elemente noch nützlich sein kann).

Spezifikationen

Specification
SVG Animations Level 2
# DurAttribute

Browser-Kompatibilität