Запретить запуск анимации щелчка SVG SMIL более одного раза

Question

У меня есть следующий SVG, который я анимирую с помощью SMIL - он отлично работает при щелчке, но будет повторяться при повторных щелчках - как я могу предотвратить это?

Я хочу, чтобы он запускался только один раз, а затем ничего не делал при следующем щелчке!

<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">

  <polygon points="60,60 90,120 30,120">
    <animateTransform
        id="at"
        attributeName="transform"
        type="translate"
        from="0 0"
        to="0 -39"
        dur="1s"
        begin="click"
        fill="freeze"/>
   
 </polygon>
</g> 
</svg>

_{Свободный перевод вопроса Prevent SVG SMIL click animation from running more than once от участника @Tim.}

Answer 1

Установите для свойства pointer-events значение none в конце анимации, тогда дальнейшие щелчки мыши игнорируются

Значение pointer-events="none" устанавливается с помощью добавления второй анимации, которая начинается после окончания анимации движения begin="at.end"

 <set
        attributeName="pointer-events"
        to="none"
        begin="at.end"/>

<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">

  <polygon points="60,60 90,120 30,120">
    <animateTransform
        id="at"
        attributeName="transform"
        type="translate"
        from="0 0"
        to="0 -39"
        dur="0.5s"
        begin="click"
        fill="freeze"/>
   <set
        attributeName="pointer-events"
        to="none"
        begin="at.end"/>
 </polygon>

</svg>

_{Свободный перевод ответа от участника @Robert Longson.}

Answer 2

Рассмотрите другие варианты запрета повторной анимации после клика:

restart = "whenNotActive"

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

<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">

  <polygon points="60,60 90,120 30,120">
    <animateTransform
        id="at"
        attributeName="transform"
        type="translate"
        from="0 0"
        to="0 -39"
        dur="1s"
        begin="click"
        fill="freeze"
        restart="whenNotActive"/>
    </polygon>
</svg>

restart = "never"

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

Другими словами анимация срабатывает только один раз, повторный запуск невозможен. Снова запустить анимацию можно только после перезагрузки документа.

<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">

  <polygon points="60,60 90,120 30,120">
    <animateTransform
        id="at"
        attributeName="transform"
        type="translate"
        from="0 0"
        to="0 -39"
        dur="1s"
        begin="click"
        fill="freeze"
        restart="never"/>
 </polygon>
</svg>

_{Свободный перевод ответа от участника @Alexandr_TT.}

БЛОГ НА HUSL

Запретить запуск анимации щелчка SVG SMIL более одного раза

Ответы (2 шт):