Spec-Zone.ru › SVG

перезапуск

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

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

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

Пример

html
<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>
js
document.getElementById("restart").addEventListener("click", (evt) => {
  document.querySelectorAll("animate").forEach((element) => {
    element.beginElement();
  });
});

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

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

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

whenNotActive

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

never

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

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

Спецификация
SVG Анимации Уровень 2
# RestartAttribute

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

Spec-Zone.ru

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