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.

Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:

Beispiel

html,
body,
svg {
  height: 100%;
}

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>

Verwendungshinweise

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) ausgedrückt werden. Es ist möglich, diese Zeitrepräsentationen zu kombinieren, um komplexe Dauern wie hh:mm:ss.iii oder mm:ss.iii zu erstellen.
media: Dieser Wert gibt die einfache Dauer als intrinsische Mediadauer an. Dies ist nur für Elemente gültig, die Medien definieren. (Bei Animationselementen wird das Attribut ignoriert, wenn media angegeben wird.)
indefinite: Dieser Wert gibt die einfache Dauer als unbestimmt an.

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

Spezifikationen

Specification
SVG Animations Level 2 # DurAttribute

Browser-Kompatibilität

BCD tables only load in the browser