Метод №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: сховати/показати шлях
Ви не зможете використати спосіб
<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, на який посилається
<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 як , то методи №1 та №3 повинні працювати нормально.
Якщо ви використовуєте SVG в якості фонового зображення, зміна джерела - робочий варіант.
Ще немає коментарів