SVGAnimatedEnumeration: 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.

Learn more
See full compatibility

The animVal read-only property of the SVGAnimatedEnumeration interface interface represents the value of an SVG enumeration.

In SVG 2, animVal reflects the non-animated value of the attribute: it is the same as baseVal .

Value

An integer representing the value of the enumeration.

The allowed values depend on the attribute that is reflected. This property cannot be written.

Exceptions

NoModificationAllowedError DOMException: Thrown if the property is set to any value.

Examples

Basic usage

html,
body,
svg {
  height: 100%;
}

html

<div>
  <svg viewBox="0 0 100 100" width="200" height="200">
    <clipPath id="clip1" clipPathUnits="userSpaceOnUse">
      <animate
        attributeName="clipPathUnits"
        values="userSpaceOnUse;objectBoundingBox;userSpaceOnUse"
        dur="2s"
        repeatCount="indefinite" />
      <circle cx="50" cy="50" r="25" />
    </clipPath>

    <rect id="r1" x="0" y="0" width="50" height="100" />

    <use clip-path="url(#clip1)" href="#r1" fill="lightblue" />
  </svg>
</div>
<pre id="log"></pre>

The following JavaScript gets the element, and logs the animValue of the SVGClipPathElement.clipPathUnits property.

const clipPath1 = document.getElementById("clip1");
const log = document.getElementById("log");

function displayLog() {
  const animValue = clipPath1.clipPathUnits.animVal;
  const baseValue = clipPath1.clipPathUnits.baseVal;
  log.textContent = `The 'clipPathUnits.animVal' is ${animValue}.\n`;
  requestAnimationFrame(displayLog);
}

displayLog();