Сделать реверсную анимацию SVG иконки микрофона

#javascript #html #css #svg #анимация

При клике на элемент происходит анимация, но можно ли вернуть элемент в исходное
состояние при повторном клике. (Сделать обратную анимацию)



const btn = document.querySelector('div[role="button"]');
const micro = document.querySelectorAll('.micro');
btn.onclick = () => {
  micro.forEach((e) => {
    e.beginElement();
  });
}
div[role="button"] {
  border: 0.0625rem solid;
  width: 68px;
  font-size: 0;
}

  




    

Ответы

Ответ 1

Немного скорректировал SVG и добавил чуть-чуть JS. Правда, в погоне за минимальными
изменениями, слегка изменилась анимация (не знаю, насколько это критично):



const btn = document.querySelector('div[role="button"]');
const micro = document.querySelectorAll('.micro');
btn.onclick = () => {
  micro.forEach((e) => {
    let sTemp = e.getAttribute('from');
    e.setAttribute('from', e.getAttribute('to'));
    e.setAttribute('to', sTemp);
    e.beginElement();
  });
}
div[role="button"] {
  border: 0.0625rem solid;
  width: 68px;
  font-size: 0;
}

  



Ответ 2

Зеленая кнопка имеет  id="play" Запуск анимации от радиокнопки к
иконке микрофона Красная кнопка имеет  id="stop" Запуск анимации от
иконки микрофона к радиокнопке
Заменил прямоугольник на  с атрибутом
stroke-linecap="round" что позволило убрать лишние анимации.  
Если анимация находится внутри тегов svg элементов, то не нужно
писать xlink:href Эта переадресовка нужна, когда анимация находится
вне анимируемых элементов.