SVGAnimatedEnumeration

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

TheSVGAnimatedEnumeration interface describes attribute values which are constants from a particular enumeration and which can be animated.

Instance properties

baseVal: An integer that is the base value of the given attribute before applying any animations.
animVal: If the given attribute or property is being animated, it contains the current animated value of the attribute or property. If the given attribute or property is not currently being animated, it contains the same value asbaseVal.

Instance methods

TheSVGAnimatedEnumeration interface do not provide any specific methods.

Examples

Considering this snippet with a<clipPath> element: ItsclipPathUnits is associated with aSVGAnimatedEnumeration object.

html

<svg viewBox="0 0 100 100" width="200" height="200">  <clipPath clipPathUnits="userSpaceOnUse">    <circle cx="50" cy="50" r="35" />  </clipPath>  <!-- Some reference rect to materialized to clip path -->  <rect x="0" y="0" width="45" height="45" /></svg>

This snippet gets the element, and logs thebaseVal andanimVal of theSVGClipPathElement.clipPathUnits property. As no animation is happening, they have the same value.

const clipPathElt = document.getElementById("clip1");console.log(clipPathElt.clipPathUnits.baseVal); // Logs 1 that correspond to userSpaceOnUseconsole.log(clipPathElt.clipPathUnits.animVal); // Logs 1 that correspond to userSpaceOnUse