SVGAnimatedNumber: свойство animVal

Только для чтения animVal свойство интерфейса SVGAnimatedNumber представляет собой анимированное значение числового атрибута SVG-элемента.

Некоторые анимируемые атрибуты SVG принимают одно число, например, атрибут radius элементов <circle> или <ellipse>, и атрибуты width и height элемента <rect>, и многие другие. Атрибут animVal предоставляет доступ к текущему анимированному значению анимируемого числового атрибута во время анимации.

A number; текущее значение анимированного атрибута как число с плавающей точкой.

В этом примере используется элемент <path> с вложенным элементом <animate>, который анимирует значение атрибута <pathLength> пути:

<path d="M 0,40 h100" pathLength="90" id="path">
  <animate
    attributeName="pathLength"
    values="50; 90; 50;"
    dur="10s"
    repeatCount="indefinite" />
</path>

const path = document.querySelector("path");

console.log(path.pathLength.animVal); // output: 50
console.log(path.pathLength.baseVal); // output: 90

Мы используем свойство animVal для доступа к текущему значению анимируемого pathLength, в то время как SVGAnimatedNumber.baseVal отражает базовое (не анимируемое) значение pathLength.

• SVGAnimatedInteger
• SVGElement