Почему свг с маской из спрайта не отображается через 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 