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

В библиотеке Snap.svg для создания радиальных градиентов используется метод paper.gradient(), который позволяет задавать плавный переход цвета от центра к периферии элемента. Радиальные градиенты особенно полезны для имитации объёма, световых эффектов и создания глубины в векторной графике.

Синтаксис радиального градиента

Радиальный градиент задаётся строкой в формате:

"r(x,y)#цвет1-цвет2-...-цветN"
  • r — обозначение радиального градиента (radial).
  • (x,y) — координаты центра градиента относительно элемента, где 0 0 — верхний левый угол, 1 1 — нижний правый угол.
  • #цвет1-цвет2-...-цветN — последовательность цветов градиента, разделённых дефисом.

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

var s = Snap(400, 400);
var radialGrad = s.gradient("r(0.5,0.5)#ff0000-#0000ff");
var circle = s.circle(200, 200, 100);
circle.attr({ fill: radialGrad });

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

Настройка позиции и масштаба градиента

Координаты центра градиента (cx, cy) позволяют смещать фокус цвета:

var radialGrad = s.gradient("r(0.3,0.7)#00ff00-#ffffff");
  • 0.3 по оси X смещает центр к левому краю.
  • 0.7 по оси Y смещает центр к нижней части.

Размер градиента можно изменить, используя параметр радиуса r:

var radialGrad = s.gradient("r(0.5,0.5,0.8)#ffcc00-#000000");

Третий параметр 0.8 задаёт радиус градиента относительно ширины или высоты элемента (Snap.svg автоматически масштабирует его пропорционально элементу).

Добавление нескольких цветовых остановок

Радиальные градиенты могут содержать более двух цветов. Каждую остановку можно указать через дефис или с точной позицией:

var radialGrad = s.gradient("r(0.5,0.5)#ff0000:0-#00ff00:0.5-#0000ff:1");
  • :0, :0.5, :1 — позиции цветовой остановки (0 — центр, 1 — край радиуса).
  • Это даёт более точный контроль над распределением цветов внутри градиента.

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

Радиальный градиент можно применить к любому SVG-элементу:

var rect = s.rect(50, 50, 300, 200);
rect.attr({ fill: s.gradient("r(0.5,0.5)#ffff00-#ff00ff") });

var ellipse = s.ellipse(200, 200, 150, 100);
ellipse.attr({ fill: s.gradient("r(0.4,0.6)#00ffff-#ff0000") });
  • Для прямоугольников и эллипсов центр градиента также задаётся в относительных координатах.
  • Snap.svg автоматически адаптирует радиус градиента под размер элемента.

Комбинация радиальных и линейных градиентов

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

var linear = s.gradient("l(0,0,1,1)#ffffff-#000000");
var radial = s.gradient("r(0.5,0.5)#ff0000-#0000ff");
var group = s.group();
group.add(s.rect(0, 0, 400, 200).attr({ fill: linear }));
group.add(s.circle(200, 100, 50).attr({ fill: radial }));
  • Линейный градиент создаёт фон, а радиальный накладывается сверху.
  • Элементы можно комбинировать в группы для удобного управления визуальными эффектами.

Анимация радиальных градиентов

Snap.svg позволяет анимировать свойства градиента, создавая динамичные эффекты:

var circle = s.circle(200, 200, 100);
var grad = s.gradient("r(0.5,0.5)#ff0000-#0000ff");
circle.attr({ fill: grad });

grad.animate({ cx: 0.8, cy: 0.2 }, 2000, mina.easeinout);
  • Свойства cx и cy смещают центр градиента во время анимации.
  • Можно также анимировать цвета, используя массивы цветов и метод animate().

Важные нюансы работы с радиальными градиентами

  1. Относительные координаты: значения (0–1) задают относительное положение и масштаб, что обеспечивает адаптивность к размерам элементов.
  2. Цветовые переходы: для плавности градиента рекомендуется добавлять промежуточные цвета при больших контрастах.
  3. Производительность: сложные градиенты с множеством остановок могут замедлять рендеринг на слабых устройствах, особенно при анимации.
  4. Совместимость: Snap.svg использует стандарт SVG, поэтому радиальные градиенты корректно отображаются во всех современных браузерах.

Примеры использования радиальных градиентов

  • Создание бликов на сферах или кнопках.
  • Имитация света и тени для 2D-объёмов.
  • Декоративные фоны с плавными цветами.
  • Анимации «пульсации» центра градиента для динамичных интерфейсов.

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

Оглавление