SVGAnimatedInteger: 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 property of the SVGAnimatedInteger interface represents the animated value of an <integer>. If no animation is applied, animVal equals baseVal.

Some attributes, like the numOctaves attribute of the <feTurbulence> element or the order attribute of the <feConvolveMatrix> accept a long integer as a value. This property provides access to the current animated state of the attribute as a number.

Value

A long; the animated value of the attribute.

Examples

const feTurbulence = document.querySelector("feTurbulence");

// Set the animatable 'numOctaves' attribute
feTurbulence.setAttribute("numOctaves", "4");

// Access the SVGAnimatedInteger object
const animatedInteger = feTurbulence.numOctaves;

// Get the animated value (read-only)
console.log(animatedInteger.animVal); // Output: 4 (the current animated value)