Градиенты: линейные и радиальные

SVG.js предоставляет мощный и интуитивно понятный интерфейс для создания и управления градиентами. Градиенты в SVG.js делятся на линейные и радиальные, и оба типа позволяют создавать плавные переходы цветов с высокой степенью контроля.

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

Линейный градиент представляет собой плавный переход цветов вдоль прямой линии. В SVG.js его создание осуществляется через метод gradient('linear', callback), где callback задаёт цветовые остановки и параметры градиента.

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

const draw = SVG().addTo('body').size(400, 400);

const linearGradient = draw.gradient('linear', function(add) {
    add.stop(0, '#ff0000'); // начало градиента (0%)
    add.stop(1, '#0000ff'); // конец градиента (100%)
});

// Применение градиента к прямоугольнику
draw.rect(200, 200).fill(linearGradient);

Ключевые моменты при работе с линейными градиентами:

  • add.stop(offset, color, opacity) — добавляет цветовую остановку.

    • offset — позиция градиента от 0 до 1.
    • color — цвет остановки в любом формате, поддерживаемом SVG.
    • opacity — необязательный параметр прозрачности.

  • Направление градиента задаётся атрибутами x1, y1, x2, y2. По умолчанию линейный градиент идёт слева направо (0,0 → 1,0):

linearGradient.from(0, 0).to(1, 1); // диагональный градиент
  • Линейные градиенты можно применять к любым фигурам: прямоугольникам, кругам, эллипсам, линиям, тексту и т.д.

Радиальные градиенты

Радиальный градиент создаёт переход цветов от центра к периферии. В SVG.js радиальные градиенты создаются аналогично линейным, но с использованием gradient('radial', callback).

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

const radialGradient = draw.gradient('radial', function(add) {
    add.stop(0, '#ffff00'); // центр
    add.stop(1, '#ff00ff'); // края
});

// Применение к кругу
draw.circle(200).fill(radialGradient).move(100, 100);

Особенности радиальных градиентов:

  • Атрибуты cx, cy, r задают центр и радиус градиента. По умолчанию центр (0.5, 0.5) и радиус 0.5 (50% от размера объекта).
  • Радиальные градиенты могут быть elliptical, если задать разные значения для осей X и Y через gradient.transform().
  • Использование прозрачности позволяет создавать эффекты свечения или мягкого затухания.
radialGradient.stop(0, '#ffffff', 0.5); // полупрозрачный центр

Использование градиентов с трансформациями

SVG.js поддерживает трансформацию градиентов без изменения фигуры:

  • gradient.rotate(angle) — поворот градиента на угол в градусах.
  • gradient.scale(sx, sy) — масштабирование градиента по осям X и Y.
  • gradient.translate(dx, dy) — смещение градиента относительно фигуры.

Пример применения трансформаций:

linearGradient.rotate(45).scale(2, 1).translate(0.1, 0.2);
draw.rect(200, 200).fill(linearGradient);

Градиенты и анимация

SVG.js позволяет анимировать градиенты для создания динамических визуальных эффектов. Основные подходы:

  1. Анимация остановок цвета:
linearGradient.stop(0).animate(2000, '<>').attr({ offset: 1 });
  1. Анимация поворота градиента:
linearGradient.animate(3000).rotate(360);
  1. Анимация прозрачности:
radialGradient.stop(1).animate(1000, '>').attr({ opacity: 0 });

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

Множественные градиенты и их переиспользование

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

const multiGradient = draw.gradient('linear', add => {
    add.stop(0, '#00ff00');
    add.stop(1, '#0000ff');
});

draw.rect(100, 100).fill(multiGradient);
draw.circle(50).fill(multiGradient);
  • Один объект градиента может быть применён к нескольким фигурам.
  • Это позволяет экономить ресурсы и поддерживать единый стиль оформления.

Смешивание и композитные эффекты

Градиенты можно комбинировать с другими методами заливки SVG.js:

  • Маски (mask) и клиппинг (clip) для создания сложных форм с градиентной заливкой.
  • Прозрачность (opacity) для наложения нескольких градиентов.
  • Фильтры (filter) для создания свечения, размытия и других эффектов.

Пример смешивания градиента с маской:

const mask = draw.rect(200, 200).fill('#fff');
const gradient = draw.gradient('radial', add => {
    add.stop(0, '#ff0000');
    add.stop(1, '#000000');
});

draw.rect(200, 200).fill(gradient).maskWith(mask);

Практические советы

  • Для диагональных и нестандартных направлений лучше явно указывать from(x1, y1).to(x2, y2).
  • Использовать полупрозрачные остановки для создания плавных свечений.
  • Для динамических интерфейсов комбинировать анимацию градиентов с трансформациями.
  • При большом количестве фигур использовать один объект градиента для повторного применения — это ускоряет рендеринг.

Градиенты в SVG.js обеспечивают гибкость и контроль над визуальными эффектами. Мощные методы трансформации, анимации и повторного использования позволяют создавать сложные, динамичные и эстетически выразительные графические элементы в веб-интерфейсах.

Оглавление