SVGAnimatedPreserveAspectRatio: свойство animVal

Свойство animVal только для чтения интерфейса SVGAnimatedPreserveAspectRatio представляет значение атрибута preserveAspectRatio SVG-элемента после применения любых анимаций или преобразований.

Объект SVGPreserveAspectRatio.

Рассмотрим следующий 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>

Этот пример определяет элемент <image>, который анимирует свой атрибут preserveAspectRatio. Анимация выполняется один раз и устанавливает атрибут fill в "freeze", поэтому эффект анимации сохраняется после завершения анимации.

Мы выполняем следующий код сразу при загрузке страницы:

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)

Если мы выведем значения animVal.meetOrSlice и baseVal.meetOrSlice снова после завершения анимации, мы увидим следующее:

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

Обратите внимание, что если мы установим fill в "remove" (или удалим fill полностью, так как "remove" является значением по умолчанию), то эффекты анимации будут удалены по завершении анимации, и animVal.meetOrSlice вернется к 1.

• SVGPreserveAspectRatio
• SVGElement