dur

Baseline Widely available

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

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

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

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>

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

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden