SVGAnimatedTransformList.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⁩.

The animVal read-only property of the SVGAnimatedTransformList interface represents the animated value of the transform attribute of an SVG element.

This property reflects the SVG element's transform, the <linearGradient> or <radialGradient> element's gradientTransform attribute, or the <pattern> element's patternTransform attribute as a readonly SVGTransformList, providing access to the dynamically updated SVGTransform for each transform function during an animation. If no animation is active, this property will return the same value as baseVal.

Value

An SVGTransformList object that reflects the current animated value of the transform attribute.

Examples

// Get the rectangle element
const rect = document.querySelector("rect");

// Access the animated transform list (if any)
const animTransforms = rect.transform.animVal;

// Log the animated transforms to the console
console.dir(animTransforms);