Как указать SVG линейный градиент в терминах угла - PullRequest
Новая
       10

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

5 голосов
/ 24 февраля 2012

Я бы хотел указать линейный градиент SVG так, чтобы он точно повторял поведение линейного градиента CSS. Например, в CSS-градиенте вы можете указать, что градиент начинается и заканчивается в верхнем левом и нижнем правом углу окна соответственно. Когда размер окна изменяется, градиент фона автоматически адаптируется к новому размеру.

В моей первой попытке я продублировал линейный градиент CSS с помощью SVG, указав угол и вычислив координаты x1, y1, x2, y2 из размера блока. Но если размер окна изменяется, угол наклона градиента не изменяется и больше не является правильным. (Мне бы пришлось пересчитать все координаты).

Моей следующей попыткой было использовать преобразование для поворота градиента. Вот некоторый код: 

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <linearGradient id="g1" gradientUnits="userSpaceOnUse" 
      gradientTransform="rotate(-45 150 50)">
    <stop stop-color="#FF0000" offset="0"/>
    <stop stop-color="#00FF00" offset="0.5"/>
    <stop stop-color="#0000FF" offset="1"/>
  </linearGradient>
  <rect x="0" y="0" width="100%" height="100%" fill="url(#g1)" />
</svg>

Теперь, это работает для коробки размером (300,100), но вы увидите, что мне нужно указать абсолютные значения для центра вращения (150,50).

Могу ли я указать центр в процентах? В конце я хочу, чтобы угол наклона был адаптирован к размерам рамки.

1 Ответ

2 голосов
/ 24 февраля 2012

SVG допускает, чтобы начало вращения с градиентным преобразованием было задано в терминах абсолютных координат . Вам нужно будет динамически установить начало вращения с помощью JavaScript, чтобы сделать то, что, как я думаю, вы хотите сделать: вращение градиента, а также равномерное распределение цветов в пределах ячейки с содержимым.

...