SVGAnimationElement: getSimpleDuration()-Methode

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.

Die Methode getSimpleDuration() des SVGAnimationElement gibt einen Float-Wert zurück, der die Anzahl der Sekunden für die einfache Dauer dieser Animation darstellt.

Die einfache Dauer bezieht sich auf die Zeitspanne, die eine Animation in einer einzigen Iteration laufen soll, ohne Wiederholungen, Neustarts oder Verlängerungen zu berücksichtigen.

Diese Eigenschaft spiegelt das dur-Attribut des <animate>, <animateMotion> oder <animateTransform>-Elements wider.

Syntax

js
getSimpleDuration()

Parameter

Keine (undefined).

Rückgabewert

Ein Float.

Ausnahmen

NotSupportedError DOMException

Wird ausgelöst, wenn die einfache Dauer des SVGAnimationElement undefiniert ist (z. B. wenn die Endzeit unbestimmt ist). Dies geschieht, wenn das dur-Attribut auf indefinite gesetzt ist oder undefiniert ist, da in diesem Fall die einfache Dauer als undefiniert gilt.

Beispiele

Dieses Beispiel demonstriert, wie das Attribut dur="3s" eine einfache Dauer von 3 Sekunden definiert.

html
<svg width="200" height="200" viewBox="0 0 200 200">
  <circle cx="50" cy="50" r="20" fill="rebeccapurple">
    <animate
      attributeName="cx"
      from="50"
      to="150"
      dur="3s"
      repeatCount="indefinite" />
  </circle>
</svg>
js
const animationElement = document.querySelector("animate");

const simpleDuration = animationElement.getSimpleDuration();
console.log(`The simple duration is: ${simpleDuration} seconds`); // Output: 3

Da repeatCount="indefinite" kontinuierliches Schleifen spezifiziert, ist die effektive Dauer unendlich, aber die einfache Dauer bleibt 3 Sekunden pro Iteration.

Spezifikationen

Specification
SVG Animations Level 2
# __svg__SVGAnimationElement__getSimpleDuration

Browser-Kompatibilität

BCD tables only load in the browser