Spec-Zone.ru › SVG

перезапуск

Атрибут restart указывает, можно ли перезапустить анимацию.

Этот атрибут можно использовать со следующими элементами SVG:

  • <animate>
  • <animateMotion>
  • <animateTransform>
  • <set>

Пример

<svg viewBox="0 0 220 200" xmlns="http://www.w3.org/2000/svg">
  <rect y="30" width="100" height="100">
    <animate
      attributeType="XML"
      attributeName="y"
      from="30"
      to="100"
      dur="5s"
      repeatCount="1"
      restart="always" />
  </rect>
  <rect x="120" y="30" width="100" height="100">
    <animate
      attributeType="XML"
      attributeName="y"
      from="30"
      to="100"
      dur="5s"
      repeatCount="1"
      restart="whenNotActive" />
  </rect>
  <a id="restart"><text y="20">Restart animation</text></a>
</svg>
document.getElementById("restart").addEventListener("click", (evt) => {
  document.querySelectorAll("animate").forEach((element) => {
    element.beginElement();
  });
});

Примечания по использованию

Значение always | whenNotActive | never
Значение по умолчанию always
Анимируемый Нет
always

Это значение указывает, что анимацию можно перезапустить в любое время.

whenNotActive

Это значение указывает, что анимацию можно перезапустить, только когда она неактивна (то есть после окончания активного интервала). Попытки перезапустить анимацию во время её активного интервала игнорируются.

never

Это значение указывает, что анимацию нельзя перезапустить.

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

Спецификация
SVG Animations Level 2>
# RestartAttribute>

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/restart

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API