SVGAnimatedNumber: 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 Juli 2015.
Die animVal-Schreibgeschützte Eigenschaft der SVGAnimatedNumber-Schnittstelle repräsentiert den animierten Wert eines numerischen Attributs eines SVG-Elements.
Einige animierbare SVG-Attribute akzeptieren eine einzelne Zahl, wie das radius-Attribut der <circle>- oder <ellipse>-Elemente und die width- und height-Attribute des <rect>-Elements und viele andere. Das animVal-Attribut ermöglicht den Zugriff auf den aktuellen animierten Wert des animierbaren numerischen Attributs während Animationen.
Wert
Eine number; der aktuelle Wert des animierten Attributs als Gleitkommazahl.
Beispiele
Dieses Beispiel beinhaltet ein <path>-Element mit einem verschachtelten <animate>-Element, das den Wert des pathLength-Attributs des Pfads animiert:
<path d="M 0,40 h100" pathLength="90" id="path">
<animate
attributeName="pathLength"
values="50; 90; 50;"
dur="10s"
repeatCount="indefinite" />
</path>
const path = document.querySelector("path");
console.log(path.pathLength.animVal); // output: 50
console.log(path.pathLength.baseVal); // output: 90
Wir verwenden die animVal-Eigenschaft, um auf den aktuellen Wert des animierenden pathLength zuzugreifen, während SVGAnimatedNumber.baseVal den Basiswert (nicht animierend) des pathLength widerspiegelt.
Spezifikationen
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGAnimatedNumber__animVal |
Browser-Kompatibilität
Loading…