Заставить линейный градиент SVG всегда заполнять прямоугольник под определенным углом

Мне нужно заполнить прямоугольники с разными пропорциями и размерами одним линейным градиентом, идущим сверху слева направо и всегда под углом 45 градусов (а не только от угла к углу).

Вот код, который заполняет прямоугольник от угла до угла, как мне сделать его на 45 градусов?

Или jsfiddle https://jsfiddle.net/45nuu6L0/

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" width="100" height="50">
  <linearGradient id="gradient" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
     <stop  offset="0" style="stop-color:#000"/>
     <stop  offset="0.48" style="stop-color:#000;stop-opacity:0"/>
     <stop  offset="1" style="stop-color:#000"/>
  </linearGradient>
  <rect width="100%" height="100%" fill="url(#gradient)" />
</svg>

svg gradient linear-gradients
person Spadar Shut    schedule 21.01.2016    source источник
comment
Разве это не тот случай, когда градиент либо идет сверху слева направо, либо под углом 45 градусов, а не в обоих случаях (кроме квадрата)?   -  person Glenn Howes    schedule 21.01.2016
comment
Градиенты SVG не поддерживают такое поведение. Я не верю, что есть какой-то способ реализовать то, что вам нужно, без динамического управления градиентом SVG с помощью JS.   -  person Paul LeBeau    schedule 22.01.2016

Ответы (1)


arrow_upward
2
arrow_downward

Я думаю, вам придется поиграть со свойством градиента Transform вашего linearGradient. В качестве отправной точки:

<!DOCTYPE html> <html> <body>

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" width="100" height="50">
  <linearGradient  gradientTransform="rotate(-45)" id="gradient" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1" >
 <stop  offset="0" style="stop-color:#000"/>
 <stop  offset="0.48" style="stop-color:#000;stop-opacity:0"/>
 <stop  offset="1" style="stop-color:#000"/>
  </linearGradient>
  <rect width="100%" height="100%" fill="url(#gradient)"  />
</svg>

</body></html>

person Glenn Howes    schedule 21.01.2016