Как поставить для SVG вместо fill — gradient?

Question

[DeniSidorenko]

Добрый день, для смены цвета в svg используется свойство FIll. Как задать Gradient вместо Fill

Answer 1

[RAX7]

<svg>
  <!-- Градиент -->
  <linearGradient id="linear-gradient">
    <stop offset="0%" stop-color="gold"/>
    <stop offset="100%" stop-color="teal"/>
  </linearGradient>

  <!-- Фигура с градиентной заливкой -->
  <rect fill="url(#linear-gradient)"
        width="100%" height="100%"/>
</svg>

css.yoksel.ru/svg-gradients

Comments

[Сергей Кореневский]

Спасибо. А подскажите а как сделать также тень????

Answer 2

[Максим]

Вот так :

<defs>
  <linearGradient id="linear" gradientUnits="userSpaceOnUse">
   <stop style="stop-color:#000000;" offset="0"/>
   <stop style="stop-color:#000000;stop-opacity:0;" offset="1"/>
  </linearGradient>
 </defs>

и потом эту конструкцию ставим на fill у rect path etc...
разумеется что stop-color должен быть разный в hex rgba xls