SVGAnimatedNumber: animVal property
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Please take two minutes to fill out our short survey.
The animVal
read-only property of the SVGAnimatedNumber
interface represents the animated value of an SVG element's numeric attribute.
Some animatable SVG attributes accept a single number, such as the radius
attribute of the <circle>
or <ellipse>
elements and the width
and height
attributes of the <rect>
element, and many others. The animVal
attribute provides access to the current animated value of the animatable numeric attribute during animations.
Value
A number
; the current value of the animated attribute as a float.
Examples
This example includes a <path>
element with a nested <animate>
element that animates the value of the path's pathLength
attribute:
<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
We use the animVal
property to access the current value of the animating pathLength
, while the SVGAnimatedNumber.baseVal
reflects the base (non-animating) value of the pathLength
.
Specifications
Specification |
---|
Scalable Vector Graphics (SVG) 2 # __svg__SVGAnimatedNumber__animVal |