SVGAnimatedNumber: свойство baseVal

Свойство baseVal интерфейса SVGAnimatedNumber представляет собой базовое (неанимированное) значение анимируемого числового атрибута.

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

Значение 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.baseVal); // output: 90
path.pathLength.baseVal = 50; // updates the value
console.log(path.pathLength.baseVal); // output: 90

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

Чтобы получить текущее значение значения pathLength во время анимации, используйте свойство SVGAnimatedNumber.animVal.

• SVGAnimatedInteger
• SVGElement