SVGAnimationElement: метод getCurrentTime()

Метод SVGAnimationElement getCurrentTime() возвращает число с плавающей точкой, представляющее текущее время в секундах относительно нулевого момента времени для заданного контейнера времени.

Нулевой момент времени относится к моменту, когда контейнер времени начинает свою временную шкалу. Он служит начальной точкой отсчета для всех анимаций внутри этого контейнера.

Контейнер времени — это элемент или контекст, который определяет локальную временную шкалу для одной или нескольких анимаций. Анимации внутри контейнера времени измеряются относительно его временной шкалы. Если контейнер времени задерживается, приостанавливается или изменяется, все анимации внутри него соответствующим образом корректируются.

Нет (undefined).

Число с плавающей точкой.

Этот пример демонстрирует, как метод getCurrentTime() получает время, прошедшее с момента нулевого времени контейнера времени.

<svg width="200" height="200" viewBox="0 0 200 200">
  <circle cx="50" cy="50" r="20" fill="rebeccapurple">
    <animate
      attributeName="cx"
      from="50"
      to="150"
      dur="4s"
      repeatCount="indefinite" />
  </circle>
</svg>

const animationElement = document.querySelector("animate");

setInterval(() => {
  const currentTime = animationElement.getCurrentTime();
  console.log(
    `Current time relative to the time container: ${currentTime} seconds`,
  );
}, 1000);

Анимация начинается в момент time zero = 0 и выполняется непрерывно, а значение getCurrentTime() непрерывно увеличивается в контексте контейнера времени.