SVGAnimatedPreserveAspectRatio: свойство baseVal

Свойство baseVal только для чтения интерфейса 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