Направление градиента

В Snap.svg градиенты применяются через атрибут fill для элементов SVG. Существует два основных типа градиентов: линейные и радиальные. Каждый из них создаётся через метод gradient() объекта Snap и описывается с помощью строки, задающей цвета и позиции перехода.

Пример линейного градиента:

var s = Snap("#svg");
var rect = s.rect(10, 10, 200, 100);
var grad = s.gradient("l(0, 0, 1, 0)#ff0000-#0000ff");
rect.attr({fill: grad});
  • l(0,0,1,0) — определяет линейный градиент от левого края к правому.
  • #ff0000-#0000ff — диапазон цветов, от красного к синему.

Для радиального градиентов используется префикс r:

var circ = s.circle(150, 150, 80);
var radGrad = s.gradient("r(0.5,0.5,0.5)#ffff00-#ff00ff");
circ.attr({fill: radGrad});
  • r(0.5,0.5,0.5) — радиальный градиент с центром в середине фигуры (0.5,0.5) и радиусом 0.5 от размера фигуры.
  • Цвета задаются аналогично линейному градиенту.

Направление линейного градиента

Направление определяется координатами начала и конца градиента. Snap.svg использует относительные координаты от 0 до 1, где (0,0) — левый верхний угол, а (1,1) — правый нижний угол элемента.

Примеры направлений:

  • Горизонтальный: l(0,0,1,0)
  • Вертикальный: l(0,0,0,1)
  • Диагональный: l(0,0,1,1)
  • Обратный диагональный: l(1,0,0,1)

Для сложных эффектов можно комбинировать несколько цветов через дефис и процентные позиции:

var grad = s.gradient("l(0,0,1,0)#ff0000:0-#00ff00:50-#0000ff:100");
rect.attr({fill: grad});
  • #ff0000:0 — красный на 0% длины градиента
  • #00ff00:50 — зелёный в середине
  • #0000ff:100 — синий на конце

Направление радиального градиента

Радиальные градиенты создаются с центром (cx, cy) и радиусом r. Можно смещать центр для достижения различных визуальных эффектов:

var grad = s.gradient("r(0.3,0.3,0.7)#ffffff-#000000");
rect.attr({fill: grad});
  • Центр градиента (0.3,0.3) смещён к левому верхнему углу
  • Радиус 0.7 — почти весь элемент

Применение градиента к контуру и заливке

Метод attr() позволяет применять градиенты не только к заливке (fill), но и к обводке (stroke):

var circle = s.circle(100, 100, 50);
var strokeGrad = s.gradient("l(0,0,0,1)#ff00ff-#00ffff");
circle.attr({
    fill: "#fff",
    stroke: strokeGrad,
    strokeWidth: 5
});
  • stroke принимает тот же объект градиента, что и fill
  • strokeWidth определяет толщину линии

Трансформация градиента

Snap.svg позволяет изменять направление и масштаб градиента через атрибут gradientTransform:

var grad = s.gradient("l(0,0,1,0)#ff0000-#0000ff");
grad.node.setAttribute("gradientTransform", "rotate(45)");
rect.attr({fill: grad});
  • rotate(angle) — поворот градиента на угол в градусах
  • Допустимы также translate, scale и комбинированные трансформации

Градиенты с повторением и зеркалированием

Для создания эффекта повторяющегося градиента используется SVG-атрибут spreadMethod:

  • pad — стандартное растягивание (по умолчанию)
  • reflect — зеркальное повторение
  • repeat — непрерывное повторение
grad.node.setAttribute("spreadMethod", "reflect");

Динамическое изменение направления

Направление градиента можно изменять программно, создавая анимацию:

var grad = s.gradient("l(0,0,1,0)#ff0000-#0000ff");
rect.attr({fill: grad});

Snap.animate(0, 1, function(val){
    grad.stop.x2 = val;
}, 2000);
  • Snap.animate(start, end, callback, duration) — плавная анимация
  • grad.stop управляет координатами градиента на лету

Заключение по направлениям

Управление направлением градиента в Snap.svg сводится к корректной настройке координат начала и конца для линейного градиента или центра и радиуса для радиального. Добавление цветов, процентов, трансформаций и повторений позволяет создавать сложные, динамичные визуальные эффекты. Это делает библиотеку Snap.svg мощным инструментом для работы с векторной графикой в браузере.

Оглавление