Смещение (offset)

Смещение (offset) в Snap.svg используется для точного позиционирования элементов, особенно при работе с градиентами, путями и анимациями. Оно позволяет изменять начальную точку, смещать объект относительно его текущих координат или управлять распределением цвета вдоль градиента.

Смещение градиентов

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

var s = Snap("#svg");
var rect = s.rect(10, 10, 200, 100);

var gradient = s.gradient("l(0, 0, 1, 0)#f00-#00f"); // линейный градиент слева направо
rect.attr({ fill: gradient });

Каждый цветовой стоп может иметь смещение offset в диапазоне от 0 до 1 или в процентах 0% - 100%:

var gradient = s.gradient("l(0, 0, 1, 0)#f00:0-#0f0:0.5-#00f:1");
rect.attr({ fill: gradient });
  • #f00:0 – красный цвет на начале градиента
  • #0f0:0.5 – зеленый цвет в середине
  • #00f:1 – синий цвет в конце

С помощью смещения можно создавать плавные переходы или резкие цветовые контрасты.

Смещение вдоль пути

Метод getPointAtLength() позволяет получать координаты точки на пути с учетом смещения вдоль него. Например, чтобы разместить круг вдоль кривой:

var path = s.path("M10,80 C40,10 65,10 95,80");
var circle = s.circle(0, 0, 5);

var length = path.getTotalLength();
var offset = 0.25; // 25% пути
var point = path.getPointAtLength(length * offset);

circle.attr({ cx: point.x, cy: point.y });
  • getTotalLength() возвращает длину пути
  • getPointAtLength() возвращает объект {x, y, alpha} для точки на пути
  • offset задается в виде доли от общей длины пути

Такой подход особенно полезен для анимаций движения объектов вдоль кривых.

Смещение объектов

Смещение объектов реализуется через метод transform(), используя t(dx, dy):

var rect = s.rect(10, 10, 50, 50);
rect.transform("t100,50"); // смещает прямоугольник на 100px по X и 50px по Y
  • t(dx, dy) – трансформация смещения
  • Можно комбинировать с масштабированием s(sx, sy) и поворотом r(angle, cx, cy)

Для накопления трансформаций используется метод transform() в цепочке:

rect.transform("t50,0 s1.5,1.5"); // сначала смещение, затем масштабирование

Смещение текста

Смещение текста в Snap.svg управляется через атрибуты x и y или через трансформацию t():

var text = s.text(20, 50, "Пример текста");
text.transform("t30,20"); // сдвигаем текст на 30px вправо и 20px вниз

Для более точного позиционирования можно использовать getBBox() для определения размеров текста и расчета смещения относительно центра или края:

var bbox = text.getBBox();
text.transform(`t${100 - bbox.cx}, ${50 - bbox.cy}`);

Смещение в анимациях

Snap.svg поддерживает смещения при анимации через метод animate():

var circle = s.circle(50, 50, 20);
circle.animate({ transform: "t200,0" }, 1000); // смещаем по X на 200px за 1 секунду

Комбинируя t(dx, dy) с кривыми ease-in-out, можно создавать сложные анимации с плавным смещением:

circle.animate({ transform: "t200,100" }, 1500, mina.easeinout);

Смещение при использовании масок и клиппинга

При масках и клиппинге смещение позволяет управлять видимой областью:

var mask = s.rect(0, 0, 100, 100).attr({ fill: "#fff" });
var circle = s.circle(50, 50, 40).attr({ fill: "#f00", mask: mask });

mask.transform("t20,20"); // сдвигаем маску, меняя видимую часть круга
  • Смещение маски не изменяет сам объект, а только область отображения
  • Можно использовать для динамических эффектов, например, движущихся «окошек»

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

  • Смещения лучше задавать через transform() для динамических объектов
  • Для градиентов и путей смещение удобнее задавать в относительных единицах (0–1), чтобы легко масштабировать
  • Комбинируя смещение и анимацию, можно создавать сложные визуальные эффекты без изменения исходной геометрии элементов

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

Оглавление