SVGAnimationElement: getStartTime() 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 getStartTime() des SVGAnimationElement gibt einen float-Wert zurück, der die Startzeit in Sekunden für das aktuelle Intervall dieses Animationselements darstellt, falls es existiert, unabhängig davon, ob das Intervall bereits begonnen hat.

Die von getStartTime() zurückgegebene Startzeit wird in Sekunden relativ zur Zeit null des Zeitcontainers gemessen.

Zeit null bezieht sich auf den Moment, in dem der Zeitcontainer seine Zeitleiste beginnt. Sie fungiert als Ausgangsreferenzpunkt für alle Animationen innerhalb dieses Containers.

Ein Zeitcontainer ist ein Element oder Kontext, das eine lokale Zeitleiste für eine oder mehrere Animationen definiert. Animationen innerhalb des Zeitcontainers werden relativ zu seiner Zeitleiste gemessen. Wenn ein Zeitcontainer verzögert, angehalten oder manipuliert wird, passen sich alle darin enthaltenen Animationen entsprechend an.

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

Syntax

js
getStartTime()

Parameter

Keine (undefined).

Rückgabewert

Ein float-Wert.

Ausnahmen

InvalidStateError DOMException

Wird ausgelöst, wenn das SVGAnimationElement kein aktuelles Intervall hat. Dies passiert, wenn die begin Zeit des Animationselements nicht erreicht oder definiert ist, sodass die getStartTime() Methode keine gültige Startzeit ermitteln kann. Ein Beispiel wäre, wenn die Animation auf begin="click" gesetzt ist, aber der Benutzer noch nicht geklickt hat, um sie zu starten.

Beispiele

Dieses Beispiel zeigt, wie das Attribut begin="3s" die Animation 3 Sekunden nach Beginn der Zeitleiste des Zeitcontainers starten lässt.

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="5s" begin="3s" />
  </circle>
</svg>
js
const animationElement = document.querySelector("animate");

const startTime = animationElement.getStartTime();
console.log(
  `The animation starts at: ${startTime} seconds relative to the time container's timeline`,
); // Output: 3

Die getStartTime() Methode gibt 3.0 zurück, da dies die Zeit relativ zur Zeit null des Zeitcontainers ist.

Spezifikationen

Specification
SVG Animations Level 2
# __svg__SVGAnimationElement__getStartTime

Browser-Kompatibilität

BCD tables only load in the browser