Как в SVG сделать так, чтобы при использовании use работали градиенты из defs?

#html5 #svg #svg_animation #svg_спрайт

К примеру у меня есть подготовленный документ с SVG-спрайтами, в котором я объявляю
каждую иконку через . Но когда я использую эти иконки через  у меня не
работают градиенты из , как я понял это из-за #shadow-root. 

Как сделать чтобы они заработали?

Пример кода:






    




    

Ответы

Ответ 1

Первая неточность - не указан второй цвет в градиенте, допустим я выбрал stop-color="gold",
вы можете выбрать любой другой цвет  


    
      
       
      
  


Лучше не указывать style="display:none", так как применение  и так скрывает
содержание SVG до вызова его командой   

Остальное смотрите в моем коде 





 

    



Ответ 2

В качестве бонуса несколько примеров анимации градиента

В основном применяется анимация атрибута offset 





 

    
 




Пример заполнения круга с помощью градиента 








Вращение градиента