SVGAnimationElement: метод getSimpleDuration()

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

Простое время выполнения относится к продолжительности времени, в течение которого анимация должна выполняться за один цикл, без учета повторений, перезапусков или расширений.

Этот свойство отражает атрибут dur элемента <animate>, <animateMotion> или <animateTransform>.

Нет (undefined).

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

NotSupportedError DOMException

Выбрасывается, если простое время выполнения SVGAnimationElement не определено (например, конечное время неопределено). Это происходит, когда атрибут dur устанавливается в indefinite или не определен, так как тогда простое время выполнения считается неопределенным.

В этом примере показано, как атрибут dur="3s" определяет простое время выполнения 3 секунды.

<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="3s"
      repeatCount="indefinite" />
  </circle>
</svg>

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

const simpleDuration = animationElement.getSimpleDuration();
console.log(`The simple duration is: ${simpleDuration} seconds`); // Output: 3

Поскольку repeatCount="indefinite" определяет непрерывное повторение, эффективное время выполнения бесконечно, но простое время выполнения остается 3 секунды за итерацию.