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

TheanimVal read-only property of theSVGAnimatedPreserveAspectRatio interface represents the value of thepreserveAspectRatio attribute of an SVG element after any animations or transformations are applied.

Value

AnSVGPreserveAspectRatio object.

Examples

Consider the following SVG:

html

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">  <image       href="crows.jpg"    width="50"    height="50"    preserveAspectRatio="xMinYMin meet">    <animate      attributeName="preserveAspectRatio"      from="xMinYMin meet"      to="xMaxYMax slice"      dur="5s"      fill="freeze"      repeatCount="1" />  </image></svg>

This example defines an<image> element which animates itspreserveAspectRatio attribute. The animation runs once and sets thefill attribute to"freeze", so the effect of the animation is persisted after the animation finishes.

We run the following code immediately when page loads:

const image = document.querySelector("#myImage");const baseVal = image.preserveAspectRatio.baseVal;const animVal = image.preserveAspectRatio.animVal;console.log(baseVal.meetOrSlice); // Output: 1 (SVG_MEETORSLICE_MEET)console.log(animVal.meetOrSlice); // Output: 1 (SVG_MEETORSLICE_MEET)

If we log the values ofanimVal.meetOrSlice andbaseVal.meetOrSlice again after the animation has finished, we will see the following:

console.log(baseVal.meetOrSlice); // Output: 1 (SVG_MEETORSLICE_MEET)console.log(animVal.meetOrSlice); // Output: 2 (SVG_MEETORSLICE_SLICE)

Note that if we setfill to"remove" (or removefill entirely, since"remove" is the default) then the animation effects will be removed when the animation is complete, andanimVal.meetOrSlice will then revert to1.