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