Как изменить градиент заливки снизу вверх

Question

<svg width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <style type="text/css">
        rect{fill:url(#MyGradient)}
      </style>
      <defs>
        <linearGradient id="MyGradient">
          <stop offset="5%" stop-color="#F60" />
          <stop offset="95%" stop-color="#FF6" />
        </linearGradient>
      </defs>

      <rect width="100" height="50">
</svg>

Я хочу, чтобы # F60 был низом, а # FF6 - верхом, и я не хочу поворачивать его ..

Answer 1

Вы должны установить x1, x2, y1, y2, чтобы указать направление linearGradient ( w3c spec ):

rect {
  fill: url(#MyGradient);
}

<svg width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="MyGradient" x1="100%" y1="100%">
      <stop offset="5%" stop-color="#F60" />
      <stop offset="95%" stop-color="#FF6" />
    </linearGradient>
  </defs>       
  <rect width="100" height="50" />
</svg>