<svg width="250" height="250" viewBox="0 0 250 200">
  <defs>
    <linearGradient id="partial"
        x1="%" y1="%" x2="%" y2="%"
        spreadMethod="">
        <stop offset="0%" style="stop-color: #ffcc00;"/>
        <stop offset="33.3%" style="stop-color: #cc6699"/>
        <stop offset="100%" style="stop-color: #66cc99;"/>
    </linearGradient>
  </defs>
  
  <rect x="10" y="10" width="200" height="200"
    style="fill: url(#partial); stroke: black;"/>
</svg>
Zoom Show direction