Смена SVG картинок

Question

Смена SVG картинок

Рейтинг: 1Ответов: 2Опубликовано: 12.02.2023

Hеобходимо, чтобы при нажатии на кнопку менялись SVG картинки (стрелка с зеленым фоном на белый).

У меня получилось только так: белая появляется при нажатии, хотя должна сменить зеленую.

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

.button {
  padding: 0;
  background-color: transparent;
  border: none;
  border-radius: 10px;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: none;
  cursor: pointer;
  display: flex;
  margin: 5px 10px;
  padding: 10px 15px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 15px;
  text-transform: uppercase;
  color: white;
  background: #23af54;
  transition: 0.3s;
}

.button:hover {
  box-shadow: 0px 2px 8px 2px rgba(141, 150, 178, .5);
}

.btn_text {
  margin-right: 10px;
}

.btn_icon {
  width: 15px;
  height: 15px;
  font-size: 15px;
}

.button .wht {
  display: block;
}

.button .grn {
  display: block;
}

.button.button--toggle .wht {
  display: none;
}

.button.button--toggle .grn {
  display: block;
}

<button class="button">
  <div class="btn_text">Запрос данных</div>
   <div class="btn_icon green">
    <svg class="grn" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down-left-circle" viewBox="0 0 16 16">
      <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-5.904-2.854a.5.5 0 1 1 .707.708L6.707 9.95h2.768a.5.5 0 1 1 0 1H5.5a.5.5 0 0 1-.5-.5V6.475a.5.5 0 1 1 1 0v2.768l4.096-4.097z"/>
   </svg>
  </div>
  <div class="btn_icon white">
    <svg class="wht"  xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down-left-circle-fill" viewBox="0 0 16 16">
      <path d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0zm-5.904-2.803a.5.5 0 1 1 .707.707L6.707 10h2.768a.5.5 0 0 1 0 1H5.5a.5.5 0 0 1-.5-.5V6.525a.5.5 0 0 1 1 0v2.768l4.096-4.096z"/>
    </svg> 
   </div>
</button>

javascript svg

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

Например вот так:

Добавляем скрывающий класс:

.hidden {
  display: none;
}

Затем по умолчанию закидываем этот класс на одну из иконок (я сделал на белую):

<div class="btn_icon whiteIcon hidden">

Добавляем лисенер на всю кнопку, а не на ее дочерний элемент и просто тогглим 2 иконки в нем:

document.querySelector('.button').addEventListener('click', function(e) {
  document.querySelector('.greenIcon').classList.toggle('hidden')
  document.querySelector('.whiteIcon').classList.toggle('hidden')
})

.button {
  padding: 0;
  background-color: transparent;
  border: none;
  border-radius: 10px;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: none;
  cursor: pointer;
  display: flex;
  margin: 5px 10px;
  padding: 10px 15px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 15px;
  text-transform: uppercase;
  color: white;
  background: #23af54;
  transition: 0.3s;
}

.button:hover {
  box-shadow: 0px 2px 8px 2px rgba(141, 150, 178, .5);
}

.btn_text {
  margin-right: 10px;
}

.btn_icon {
  width: 15px;
  height: 15px;
  font-size: 15px;
}

.button .wht {
  display: block;
}

.button .grn {
  display: block;
}

.button.button--toggle .wht {
  display: none;
}

.button.button--toggle .grn {
  display: block;
}

.hidden {
  display: none;
}

<button class="button">
  <div class="btn_text">Запрос данных</div>
   <div class="btn_icon greenIcon">
    <svg class="grn" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down-left-circle" viewBox="0 0 16 16">
      <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-5.904-2.854a.5.5 0 1 1 .707.708L6.707 9.95h2.768a.5.5 0 1 1 0 1H5.5a.5.5 0 0 1-.5-.5V6.475a.5.5 0 1 1 1 0v2.768l4.096-4.097z"/>
   </svg>
  </div>
  <div class="btn_icon whiteIcon hidden">
    <svg class="wht"  xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down-left-circle-fill" viewBox="0 0 16 16">
      <path d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0zm-5.904-2.803a.5.5 0 1 1 .707.707L6.707 10h2.768a.5.5 0 0 1 0 1H5.5a.5.5 0 0 1-.5-.5V6.525a.5.5 0 0 1 1 0v2.768l4.096-4.096z"/>
    </svg> 
   </div>
</button>

Answer 2

▲ 0

Идея не моя, но рабочая: помещаем две svg-иконки в один div-контейнер, задаём им классы - .show{display: block;} и .hidden{display: none;}. С помощью classList.remove() и classList.add() решаем - какой быть видимой.

Смена SVG картинок

Ответы