Линейные градиенты

Линейные градиенты в Snap.svg позволяют создавать плавные переходы между цветами вдоль прямой линии, задаваемой направлением градиента. В отличие от сплошных заливок, градиенты добавляют объектам визуальную глубину и динамику, что особенно важно при разработке интерактивной графики и сложных иллюстраций.

Определение градиента

Для создания линейного градиента используется метод paper.gradient() или непосредственное присвоение градиента атрибуту fill. Формат строки градиента следующий:

"l(угол)цвет1-цвет2-цветN"
  • l — обозначение линейного градиента.
  • (угол) — угол наклона градиента в градусах (опционально, по умолчанию 0°).
  • цвет1-цвет2-...-цветN — последовательность цветов, через дефис, задающих переход.

Пример:

var s = Snap(400, 200);

var rect = s.rect(50, 50, 300, 100);
rect.attr({
    fill: "l(90)red-green-blue"
});

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

Углы и координаты градиента

Линейный градиент можно задавать не только через угол, но и через координаты начала и конца. Формат с координатами:

"l(x1, y1, x2, y2)цвет1-цвет2-цветN"
  • x1, y1 — координаты начала градиента (от 0 до 1 относительно объекта).
  • x2, y2 — координаты конца градиента.
  • Цвета задаются как и в стандартном формате.

Пример:

var circle = s.circle(200, 100, 80);
circle.attr({
    fill: "l(0.2,0.2,0.8,0.8)yellow-orange-red"
});

Здесь градиент начинается в точке, удалённой на 20% по горизонтали и вертикали от верхнего левого угла объекта, и заканчивается в точке с координатами 80% от размеров объекта.

Работа с остановками цветов (color stops)

Для более точного управления переходами между цветами используются остановки (stops). Каждая остановка задаёт цвет и позицию в градиенте от 0 до 1:

"l(0,0,1,1)0:#ff0000 0.5:#00ff00 1:#0000ff"
  • 0:#ff0000 — красный цвет на позиции 0 (начало градиента).
  • 0.5:#00ff00 — зелёный на середине.
  • 1:#0000ff — синий на конце.

Это позволяет создавать градиенты с точным контролем распределения цветов и насыщенности.

Пример с прямоугольником:

var rect = s.rect(50, 50, 300, 100);
rect.attr({
    fill: "l(0,0,1,0)0:#ff0000 0.3:#ffff00 0.7:#00ff00 1:#0000ff"
});

Результат — горизонтальный градиент с равномерным и плавным переходом между четырьмя цветами.

Применение градиентов к различным элементам

Линейные градиенты можно использовать с любыми SVG-элементами: rect, circle, ellipse, path, polygon. Snap.svg автоматически масштабирует градиент под размеры объекта. Пример для кривой:

var path = s.path("M50,150 C150,50 250,250 350,150");
path.attr({
    stroke: "l(0,0,1,0)blue-white",
    strokeWidth: 5,
    fill: "none"
});

Здесь градиент применяется к обводке кривой, создавая плавный цветовой переход вдоль линии.

Анимация градиента

Snap.svg позволяет анимировать градиенты с помощью метода animate. Можно менять не только цвета, но и координаты начала и конца градиента:

var rect = s.rect(50, 50, 300, 100).attr({
    fill: "l(0,0,1,0)red-blue"
});

rect.animate({ fill: "l(0,0,1,0)green-yellow" }, 2000);

В примере градиент плавно меняется с красно-синего на зелёно-жёлтый за 2 секунды. Для более сложной анимации можно комбинировать координаты и цвета:

rect.animate({ fill: "l(0,0,1,1)pink-purple" }, 2000, mina.easeinout);

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

Линейные градиенты можно применять к g (группам) или использовать внутри масок для создания эффектов освещения и текстур:

var group = s.group(
    s.rect(50, 50, 100, 100),
    s.circle(200, 100, 50)
);

group.attr({
    fill: "l(0,0,1,1)red-orange"
});

Градиент применяется ко всей группе, сохраняя пропорции объектов относительно градиента.

Практические рекомендации

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

Сравнение линейного градиента с радиальным

  • Линейный градиент — переход вдоль прямой линии, удобен для имитации света и объёма.
  • Радиальный градиент — круговой переход, больше подходит для создания бликов и концентрических эффектов.

Snap.svg позволяет легко переключаться между типами градиентов, сохраняя синтаксис и методы работы идентичными.

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

Оглавление