SVGAnimatedEnumeration

Baseline Широко распространённая

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с января 2020 года.

Интерфейс SVGAnimatedEnumeration описывает значения атрибутов, которые являются константами из определённого перечисления и которые могут быть анимированы.

Свойства экземпляра

baseVal: Целое число, представляющее базовое значение данного атрибута до применения анимации.
animVal: Если данный атрибут или свойство анимируется, оно содержит текущее анимированное значение атрибута или свойства. Если данный атрибут или свойство в данный момент не анимируется, оно содержит то же значение, что и baseVal.

Методы экземпляра

Интерфейс SVGAnimatedEnumeration не предоставляет никаких специфических методов.

Примеры

Рассмотрим этот фрагмент с элементом <clipPath>: Его clipPathUnits ассоциирован с объектом SVGAnimatedEnumeration.

<svg viewBox="0 0 100 100" width="200" height="200">
  <clipPath id="clip1" clipPathUnits="userSpaceOnUse">
    <circle cx="50" cy="50" r="35" />
  </clipPath>

  <!-- Some reference rect to materialized to clip path -->
  <rect id="r1" x="0" y="0" width="45" height="45" />
</svg>

Этот фрагмент получает элемент и выводит значения baseVal и animVal свойства SVGClipPathElement.clipPathUnits. Поскольку анимация не происходит, они имеют одинаковое значение.

const clipPathElt = document.getElementById("clip1");
console.log(clipPathElt.clipPathUnits.baseVal); // Logs 1 that correspond to userSpaceOnUse
console.log(clipPathElt.clipPathUnits.animVal); // Logs 1 that correspond to userSpaceOnUse

Спецификации

Спецификация
Векторная графика SVG (Scalable Vector Graphics) 2 # InterfaceSVGAnimatedEnumeration

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`SVGAnimatedEnumeration`	1	12	1.5	≤12.1	3	18	4	≤12.1	1	1.0	3
`animVal`	1	12	1.5	≤12.1	3	18	4	≤12.1	1	1.0	3
`baseVal`	1	12	1.5	≤12.1	3	18	4	≤12.1	1	1.0	3

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/SVGAnimatedEnumeration