Как поставить для SVG вместо fill — gradient?
<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
Вот так :<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