<svg width="100%" height='500px'>
  <linearGradient id="gradient">
    <stop offset="0%" style="stop-color: red; " />
    <stop offset="50%" style="stop-color: yellow;" />
    <stop offset="100%" style="stop-color: green; " />
  </linearGradient>
  
  <linearGradient id="right_to_left" xlink:href="#gradient" x1="100%" y1="0%" x2="0%" y2="0%" />
  
  <linearGradient id="angle" xlink:href="#gradient" x1="0%" y1="0%" x2="100%" y2="100%" />
  
  <rect x="20" y="20" width="200" height="100" style="fill: url(#gradient)" />
    
    <rect x="20" y="140" width="200" height="100" style="fill: url(#right_to_left)" />
  
  <rect x="240" y="20" width="200" height="100" style="fill: url(#angle)" />

</svg>