restart: never: Элемент не может быть перезапущен, пока не будет перезагружен его родительский контейнер. (В случае с SVG, так как родительским контейнером является SVG-фрагмент документа, то анимация не может быть перезапущена, пока не перезагружен документ).
Другими словами пока не нажмете F5, не перегрузите браузер, не перезапустите приложение, - анимация не запустится повторно.
В примере ниже анимация жёлтого круга запускается по первому клику на холсте svg.
Анимация фиолетового круга запускается после окончания анимации желтого круга. begin="an1.end+1s"
Повторный клик будет проигнорирован. Ничего не произойдёт!
<svg id="svg1" width="500" height="400" viewBox="0 0 500 400" style='border: 1px solid black;'>
<circle id='circ1' r="50" cx="50" cy="50" fill="orange" />
<animate id="an1"
xlink:href='#circ1'
attributeName = 'cx'
restart='never'
from='50'
to='450'
dur='1s'
begin='svg1.click'
fill="freeze"
/>
<circle id='circ2' r="50" cx="50" cy="200" fill="purple" />
<animate id="an2"
xlink:href='#circ2'
attributeName = 'cx'
from='50'
to='450'
dur='1s'
begin='an1.end+0.5s'
restart="whenNotActive" />
</svg>
Потому что при повторном клике ни первая анимация, ни вторая анимация не запустится. Так как на первой стоит блокировка, а вторая анимация запускается только после окончания первой анимации.
Допустим нам нужен следующий сценарий:
- При первом клике начинает движение желтый круг
- Желтый круг заканчивает движение начинает движение фиолетовый круг
- При втором и последующих кликах желтый круг не реагирует (стоит на блокировке), а фиолетовый круг при каждом клике начинает движение
Реализовать такой сценарий можно через прокладку - анимацию, которая ничего не делает, но помогает осуществить запуск анимации фиолетового круга при повторных кликах.
<svg id="svg1" width="500" height="400" viewBox="0 0 500 400" style='border: 1px solid black;'>
<circle id='circ1' r="50" cx="50" cy="50" fill="orange" />
<!-- Анимация желтого круга -->
<animate id="an1"
xlink:href='#circ1'
attributeName = 'cx'
restart='never'
from='50'
to='450'
dur='1s'
begin='svg1.click'/>
<!-- Прокладка анимация, которая ничего не делает но помогает запустить -->
<!-- анимацию фиолетового круга при повторных кликах svg1.click -->
<animate id="an2"
xlink:href='#circ2'
attributeName = 'cx'
from='50'
to='50'
dur='0s'
begin='an1.end;svg1.click'/>
<circle id='circ2' r="50" cx="50" cy="200" fill="purple" />
<!-- Анимация фиолетового круга -->
<animate id="an3"
xlink:href='#circ2'
attributeName = 'cx'
from='50'
to='450'
dur='1s'
begin="an2.end+0.5s"
restart="whenNotActive"
/>
</svg>