Зміна SVG іконок

3 хв. читання

Метод №1: сховати/показати SVG елемент

Включаємо обидві іконки:

    <a class="expand-link" href="#0">
      <svg class="icon icon-expand" viewBox="0 0 32 32"><use xlink:href="#icon-expand"></use></svg>
      <svg class="icon icon-contract" viewBox="0 0 32 32"><use xlink:href="#icon-contract"></use></svg>
    </a>

Приховуємо одну:

    .expand-link .icon-contract {
      display: none;
    }

Коли стан змінюється, змінюємо властивість display:

    .expand-link:hover .icon-expand,
    .expand-link:active .icon-expand{
      display: none;
    }
    .expand-link:hover .icon-contract,
    .expand-link:active .icon-contract{
      display: block;
    }

Метод №2: сховати/показати шлях

Ви не зможете використати спосіб (зміна HTML-елементу відбувається на рівень вище тіні кореня, який створює , таким чином, неможливо задіяти CSS), але ви можете сховати/показати форму елемента, якщо вбудований SVG в "сирому" вигляді:

    <a class="icon-expand-link" href="#0">
      <svg ...="">
        <path class="expand" d="M32 0v12l-etc"></path>
        <path class="contract" d="M2 18h12v12l-etc"></path>
      </svg>
    </a>
     
    .icon-expand-link .contract {
      display: none;
    }
    .icon-expand-link:hover .expand {
      display: none;
    }
    .icon-expand-link:hover .contract {
      display: block;
    }

Метод №3: зміна xlink:href

Використовуючи JavaScript, можна змінити SVG, на який посилається . Модифікування елементів з допомогою JavaScript здається дивним, але розмітка, яка не дублюється - це добре, і якщо ви посилаєтеся на ,

<title> і теж зміняться, що теж приємно.
    <a class="expand-link" href="#0">
      <svg class="icon icon-expand" viewBox="0 0 32 32"><use id="target" xlink:href="#icon-expand"></use></svg>
    </a>

    $(".expand-link")
      .on("mouseenter", function() {
        $(this).find("use").attr("xlink:href", "#icon-contract");
      })
      .on("mouseleave", function() {
        $(this).find("use").attr("xlink:href", "#icon-expand");
      });

Метод № 4: модифікування використовуючи CSS

Пам'ятайте, що ви можете зробити багато корисного з CSS. Можливо, вам не потрібно зовсім інший набір форм, тому що з допомогою CSS можна створити новий значок. Також ви можете використати CSS transforms і rotate/scale/move:

Не використовуєте SVG?

Якщо ви не використовуєте вбудований SVG, але замість цього користуєтесь SVG як Зміна SVG іконок, то методи №1 та №3 повинні працювати нормально.

Якщо ви використовуєте SVG в якості фонового зображення, зміна джерела - робочий варіант.

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 6.2K
Приєднався: 7 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація