• Left to right
• Right to left
• Top to bottom
• Bottom to top
• Upper left to lower right
• Upper right to lower left

<svg width="250px" height="250px" viewBox="0 0 250 250">
  <defs>
    <linearGradient id="three_stops">
      <stop offset="0%" style="stop-color: #ffcc00;"/>
      <stop offset="33.3%" style="stop-color: #cc6699"/>
      <stop offset="100%" style="stop-color: #66cc99;"/>
    </linearGradient>

    <linearGradient id="transition"
      xlink:href="#three_stops"
      x1="0%" y1="0%" x2="100%" y2="0%"/>
  </defs>
  
  <rect x="10" y="10" width="200" height="200"
    style="fill: url(#transition); stroke: black;"/>
</svg>