3

Товарищи, доброго дня, вечера, у кого как. Следующий вопрос: как заменить svg на другую при нажатии на неё? Нужно максимально просто.

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-testid="checkbox-icon" class="css-8s785g">
<rect width="24" height="24" rx="4" fill="#151418"></rect>
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.707 8.707L10 17.414l-4.707-4.707 1.414-1.414L10 14.586l7.293-7.293 1.414 1.414z" fill="#fff"></path>
</svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-testid="checkbox-icon" class="css-8s785g">
<rect x="1" y="1" width="22" height="22" rx="3" stroke="#151418" stroke-width="2"></rect>
</svg>

Буду благодарен.

1
  • Вставьте svg на фон, кликаете по родительскому элементу, вешаете на него клик, через elem.style.background = 'новаякартинка.svg' меняете фон на нужную картинку
    – Listopad02
    14 июн 2022 в 16:40

1 ответ 1

2

const checkbox = document.querySelector('.checkbox');
const imgChecked = document.querySelector('.checked');
const imgNotChecked = document.querySelector('.not-checked');

const showCheckbox = () => {
  imgChecked.classList.toggle('visible');
  imgNotChecked.classList.toggle('visible');
  if (!checkbox.checked) {
    checkbox.checked = true;
  } else {
    checkbox.checked = false;
  }

}


imgChecked.addEventListener('click', showCheckbox);
imgNotChecked.addEventListener('click', showCheckbox)
.img {
  display: none;
  cursor: pointer;
}

.visible {
  display: inline-block;
}
<input class="checkbox" type="checkbox">
<svg class="img checked visible" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-testid="checkbox-icon" class="css-8s785g">
            <rect x="1" y="1" width="22" height="22" rx="3" stroke="#151418" stroke-width="2"></rect>
        </svg>
<svg class="img not-checked " width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-testid="checkbox-icon" class="css-8s785g">
            <rect width="24" height="24" rx="4" fill="#151418"></rect>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M18.707 8.707L10 17.414l-4.707-4.707 1.414-1.414L10 14.586l7.293-7.293 1.414 1.414z" fill="#fff"></path>
        </svg>

2
  • 2
    Можно ещё проще: Объединить SVG и переключать через CSS.
    – De.Minov
    14 июн 2022 в 18:54
  • Да вполне. Но мне пришло такое банальное 14 июн 2022 в 18:58

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.