Цветовые остановки

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

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

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

var s = Snap(400, 400);
var rect = s.rect(0, 0, 300, 300);

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

Разбор синтаксиса:

  • l(x1, y1, x2, y2) — определяет направление градиента (линейный), где (x1, y1) и (x2, y2) — координаты начала и конца градиента относительно объекта.
  • #ff0000-#0000ff — последовательность цветов, между которыми будет выполняться переход.
  • Цветовые остановки по умолчанию распределяются равномерно, если их явно не указать.

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

Радиальные градиенты создают эффект рассеянного света или концентрических цветовых колец. В Snap.svg радиальный градиент задаётся с помощью префикса r:

var circle = s.circle(150, 150, 100);
var radialGrad = s.gradient("r(0.5, 0.5, 0.5)#00ff00-#0000ff");
circle.attr({ fill: radialGrad });

Параметры:

  • r(cx, cy, r) — центр (cx, cy) и радиус r градиента, выраженные в долях от размеров объекта.
  • Цвета перечисляются через дефис: #00ff00-#0000ff.

Настройка цветовых остановок

Для более точного управления переходами между цветами используется объект stop, который позволяет задавать позиции цвета и его прозрачность.

var gradient = s.gradient("l(0, 0, 1, 0)#ff0000-#00ff00-#0000ff");
gradient.stop(0).attr({ offset: 0, color: "#ff0000" });
gradient.stop(1).attr({ offset: 0.5, color: "#00ff00" });
gradient.stop(2).attr({ offset: 1, color: "#0000ff" });

Ключевые моменты:

  • stop(index) — обращение к конкретной остановке по её индексу.
  • offset — положение цвета на градиенте от 0 до 1.
  • color — цвет в формате HEX, RGB или именованного цвета.
  • При необходимости можно задать прозрачность через opacity.

Комбинирование прозрачности и цвета

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

var rect = s.rect(0, 0, 300, 150);
var grad = s.gradient("l(0, 0, 1, 0)#ff0000-#00ff00-#0000ff");

grad.stop(0).attr({ offset: 0, color: "#ff0000", opacity: 1 });
grad.stop(1).attr({ offset: 0.5, color: "#00ff00", opacity: 0.5 });
grad.stop(2).attr({ offset: 1, color: "#0000ff", opacity: 0 });
rect.attr({ fill: grad });
  • opacity контролирует прозрачность конкретного цвета.
  • Это позволяет создавать эффекты плавного исчезновения цвета или имитацию световых бликов.

Вложенные и сложные градиенты

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

var path = s.path("M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");
var complexGrad = s.gradient("l(0,0,1,0)#ff0000-#ffff00-#00ff00-#0000ff");

complexGrad.stop(0).attr({ offset: 0, color: "#ff0000" });
complexGrad.stop(1).attr({ offset: 0.3, color: "#ffff00" });
complexGrad.stop(2).attr({ offset: 0.6, color: "#00ff00" });
complexGrad.stop(3).attr({ offset: 1, color: "#0000ff" });
path.attr({ stroke: complexGrad, strokeWidth: 5 });
  • Несколько остановок позволяют создавать сложные, многоступенчатые переходы.
  • Отдельные остановки можно динамически изменять через JavaScript, обеспечивая анимацию градиента.

Анимация цветовых остановок

Цветовые остановки можно анимировать с помощью метода animate() для создания плавных переходов между цветами:

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

grad.stop(0).animate({ color: "#00ff00" }, 2000);
grad.stop(1).animate({ color: "#ff00ff" }, 2000);
  • Метод animate() позволяет изменять цвет и прозрачность остановки.
  • Время анимации задаётся в миллисекундах.
  • Можно создавать циклические анимации через колбеки.

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

  • Всегда задавать координаты градиента относительно объекта, а не сцены, чтобы масштабирование не нарушало эффект.
  • Для сложных визуальных эффектов комбинировать линейные и радиальные градиенты на одном элементе через <defs> и use.
  • Цветовые остановки с прозрачностью особенно эффективны для имитации света и объёмных теней.

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

Оглавление