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

Question

[tis-cake]

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

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

Подскажите, что я делаю не так? Спасибо.

Answer 1

[xdevelx]

Как использовать градиент в SVG?

Comments

[tis-cake]

Свг-спрайт подключаю внизу страницы, никаких внешних ссылок. Если использовать просто градиент в спрайте, то проблем нет. Но при таком подходе не могу сделать плавный переход при наведении для иконки с градиентом.

[xdevelx]

tis-cake, Смотрите, как в css-ticks https://css-tricks.com/ сделано - градиент вынесен из symbol и находится в svg > defs

не могу сделать плавный переход

Переход для какого css свойства происходит?

[tis-cake]

Да, я тоже вынес в defs для другой иконки, но в таком случае на иконку не действует transition. Переход стоит для всех свойств (в данном случае - для background-color и background-image).

Обновил пример в песочнице. Меня больше интересует как правильно работать с маской из спрайта?

[xdevelx]

css.yoksel.ru/svg-masks - подробно про svg маски и в том числе с symbol

[tis-cake]

Читал эту статью. Про symbol там только в примерах, сами маски идут в теге svg, но не в symbol. Сами маски и у меня работают, если их прописывать внутри тега svg. Меня интересует использование масок в спрайте, когда тег svg заменяется на symbol, потому как я, похоже, прописываю их с ошибкой.
Но спасибо.

Answer 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