Как при нажатии на кнопку изменить svg?

Question

У меня есть кнопка(play). Я хочу сделать так, чтобы при нажатии на нее, поменялся svg(на паузу), при повторном же нажатии, чтобы она вернулась к прежней svg(к play). Я понимаю что это нужно реализовать с помощью js, но не пойму как лучше это сделать.

<button class="play_btn">
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M12 2C6.475 2 2 6.475 2 12C2 17.525 6.475 22 12 22C17.525 22 22 17.525 22 12C22 6.475 17.525 2 12 2ZM10 16.5V7.5L16 12L10 16.5Z" fill="#A1A6B4"/>
  </svg>
</button>

Answer 1

В <svg> добавляем сразу код двух кнопок play и pause, через CSS изначально скрываем pause.
При нажатии на кнопку добавляем класс play_btn--toggle, и через CSS скрываем play и отображаем pause.
При повтором удаляем класс.

document.querySelector('.play_btn').addEventListener('click', function(e) {
  e.target.closest('.play_btn').classList.toggle('play_btn--toggle');
})

.play_btn .svg-play {display: block;}
.play_btn .svg-pause {display: none;}

.play_btn.play_btn--toggle .svg-play {display: none;}
.play_btn.play_btn--toggle .svg-pause {display: block;}

.play_btn {
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.play_btn svg {
  width: 100%;
  height: 100%;
}

.play_btn:hover svg path {fill: #6000a0;}

<button class="play_btn">
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path class="svg-play" d="M12 2C6.475 2 2 6.475 2 12C2 17.525 6.475 22 12 22C17.525 22 22 17.525 22 12C22 6.475 17.525 2 12 2ZM10 16.5V7.5L16 12L10 16.5Z" fill="#A1A6B4"/>
    <path class="svg-pause" d="M12 2C6.475 2 2 6.475 2 12 2 17.525 6.475 22 12 22 17.525 22 22 17.525 22 12 22 6.475 17.525 2 12 2ZM12 3C7.475 3 3 7.475 3 12 3 16.525 7.475 21 12 21 16.525 21 21 16.525 21 12 21 7.475 16.525 3 12 3ZM9 16 9 8C9 7 10 7 10 8L10 16C10 17 9 17 9 16ZM14 16 14 8C14 7 15 7 15 8L15 16C15 17 14 17 14 16Z" fill="#A1A6B4" fill-rule="evenodd"/>
  </svg>
</button>

БЛОГ НА HUSL

Как при нажатии на кнопку изменить svg?

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