SVGAnimationElement: getSimpleDuration()-Methode

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.

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.

In diesem Artikel

Syntax

getSimpleDuration()

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.