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.
The animVal read-only property of the SVGAnimatedPreserveAspectRatio interface represents the value of the preserveAspectRatio attribute of an SVG element after any animations or transformations are applied.
Value
An SVGPreserveAspectRatio object.
Examples
Consider the following SVG:
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<image
id="myImage"
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 its preserveAspectRatio attribute. The animation runs once and sets the fill 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 of animVal.meetOrSlice and baseVal.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 set fill to "remove" (or remove fill entirely, since "remove" is the default) then the animation effects will be removed when the animation is complete, and animVal.meetOrSlice will then revert to 1.
Specifications
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGAnimatedPreserveAspectRatio__animVal |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
animVal
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support