Перемещение: translate

Метод translate используется для перемещения элементов SVG по горизонтали и вертикали без изменения их исходных координат. В SVG.js он позволяет легко смещать объекты с сохранением их внутренних атрибутов и совместно с другими трансформациями.

let draw = SVG().addTo('body').size(500, 500);
let rect = draw.rect(100, 50).fill('#f06');
rect.translate(50, 100);

В этом примере прямоугольник с размерами 100×50 будет смещён на 50 пикселей по оси X и на 100 пикселей по оси Y.

Параметры метода translate

Метод принимает два основных параметра:

  • x – смещение по горизонтали (в пикселях);
  • y – смещение по вертикали (в пикселях).

Если указать только одно значение, второе будет автоматически равно 0:

rect.translate(30); // смещение 30 по X и 0 по Y

Возврат значений текущего смещения

Для получения текущих координат смещения используется метод transform():

let transformData = rect.transform();
console.log(transformData.translateX); // текущий X
console.log(transformData.translateY); // текущий Y

Метод возвращает объект с текущими параметрами всех применённых трансформаций, включая scale, rotate и skew.

Комбинирование translate с другими трансформациями

SVG.js позволяет применять несколько трансформаций одновременно:

rect.rotate(45).scale(2).translate(100, 50);

Важно понимать порядок применения: сначала выполняется rotate, затем scale, и в конце translate. Изменение порядка методов изменяет визуальный результат.

Анимация перемещения

Для плавного перемещения объектов используется метод animate():

rect.animate(2000, '<>').translate(200, 150);

В этом примере прямоугольник перемещается к координатам (200, 150) за 2 секунды с использованием кривой ускорения ease-in-out (<>).

Можно анимировать только одну ось:

rect.animate(1000).translate(0, 100); // движение только по Y

Относительное и абсолютное смещение

Метод translate всегда задаёт абсолютное смещение относительно исходного положения объекта. Для относительного смещения можно использовать метод dmove:

rect.dmove(20, 0); // сдвиг на 20 пикселей вправо от текущего положения

Разница: translate(x, y) задаёт новое положение, а dmove(dx, dy) добавляет смещение к текущему.

Применение к группам элементов

Трансформации можно применять не только к отдельным объектам, но и к группам (group):

let group = draw.group();
group.add(rect);
group.add(draw.circle(50).fill('#0f9'));
group.translate(100, 50);

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

Использование translate с координатами viewBox

При работе с viewBox координаты трансформации остаются в системе координат SVG. Например, при масштабировании через viewBox:

draw.viewbox(0, 0, 200, 200);
rect.translate(50, 50); // смещение в координатах viewBox

SVG.js автоматически корректирует отображение, сохраняя пропорции.

Цепочка трансформаций

Метод translate поддерживает цепочки:

rect.translate(50, 50).translate(20, 30);

Элементы будут суммарно смещены на (70, 80). Для сброса трансформации используется:

rect.transform({translateX: 0, translateY: 0});

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

  • Комбинировать с группами для сложных композиций.
  • Использовать dmove для относительных перемещений, особенно при анимации.
  • Следить за порядком трансформаций, чтобы избежать непредсказуемых смещений.
  • Сохранять исходные координаты через transform() перед множественными трансформациями для точного контроля.

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

  • translate(x, y) – абсолютное смещение элемента.
  • dmove(dx, dy) – относительное смещение.
  • Поддержка цепочек и комбинирование с rotate, scale, skew.
  • Применимо к одиночным объектам и группам.
  • Используется совместно с animate() для плавных переходов.

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

Оглавление