@tis-cake

Почему СВГ с маской не отображается через use?

Добавляю свг-иконки через спрайт и тег use. Хочу сделать изменение фона при ховере. У одной иконки (инстаграма) не однотонный цвет, а линейный градиент.
Проблема в том, что не могу вызвать иконку с градиентом из спрайта. Если добавить сам тег svg в разметку - всё отображается корректно. Если оформить в спрайт, через symbol (как остальные иконки) - то либо вообще не появляется (хром, сафари), либо рисуется чёрный квадрат (лиса).
Пробовал по-разному изменять градиент у свг при наведении, но, насколько я понял, эту задачу без маски не реализовать.

Прикладываю ссылку на codepen:
https://codepen.io/tis-cake/pen/mdJGaXJ?editors=1100

Подскажите, что я делаю не так? Спасибо.
  • Вопрос задан
  • 86 просмотров
Пригласить эксперта
Ответы на вопрос 2
@tis-cake Автор вопроса
Почему свг с маской из спрайта не отображается через use - не знаю, но если кому поможет, решение для плавного появление свг-элемента с градиентом такое:

В спрайте:
1) в тег defs помещаем код самого элемента (в моём случае - это несколько path, завёрнутных в , которому задал id);
2) во второй тег defs помещаем нужный градиент со своим id;
3) в первом теге через вызываем нужный элемент
4) во втором теге аналогично вызываем этот же элемент, но самому symbol'у указываем ссылку на нужный градиент через fill="url(#ваш-градиент)";

В разметке:
1) вызываем подряд 2 элемента через use, 1 из которых прячем в стилях через opacity: 0;
2) в css при hover показываем нужный элемент с любой анимацией/задержкой

Профит!
P.S: Пример спрайта на https://codepen.io/tis-cake/pen/oNXVBBv
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы