перезапуск
Атрибут restart указывает, можно ли перезапустить анимацию.
Этот атрибут можно использовать со следующими элементами SVG:
Пример
<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