SVGAnimatedRect: animVal Eigenschaft

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 animVal schreibgeschützte Eigenschaft der SVGAnimatedRect-Schnittstelle repräsentiert den aktuellen animierten Wert des viewBox-Attributs eines SVG-Elements als schreibgeschütztes DOMRectReadOnly-Objekt. Sie bietet Zugriff auf den dynamischen Zustand des Rechtecks, einschließlich der x, y, width und height Werte während der Animation.

Falls keine Animation angewendet wird, spiegelt die animVal-Eigenschaft den Wert des viewBox-Attributs des SVG-Elements wider und wird identisch mit SVGAnimatedRect.baseVal sein.

Wert

Ein DOMRectReadOnly-Objekt, das den animierten Wert des viewBox-Attributs darstellt.

Beispiele

html
<svg viewBox="0 0 200 100" id="mySvg">
  <rect width="100" height="100" fill="blue" />
</svg>
js
  const svgElement = document.getElementById("mySvg");
  const animatedRect = svgElement.viewBox.animVal;

  // Log the animated value (assuming an animation is applied)
  console.log(animatedRect.x);
  console.log(animatedRect.y);
  console.log(animatedRect.width);
  console.log(animatedRect.height);
</script>

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# __svg__SVGAnimatedRect__animVal

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch