Относительные и абсолютные координаты

В SVG.js координаты элементов определяют их положение внутри контейнера <svg>. Понимание разницы между абсолютными и относительными координатами критически важно для точного позиционирования объектов и управления трансформациями.

Абсолютные координаты

Абсолютные координаты задаются относительно начала системы координат SVG, то есть точки (0, 0) в левом верхнем углу контейнера. Все координаты элементов, указанные явно через методы move(x, y) или атрибуты x, y, воспринимаются как абсолютные.

Пример:

const draw = SVG().addTo('body').size(500, 500);
const rect = draw.rect(100, 50).fill('#3498db');

// Перемещаем прямоугольник в точку (200, 150)
rect.move(200, 150);

В данном случае прямоугольник окажется точно в координатах (200, 150) относительно верхнего левого угла контейнера. Любые дальнейшие изменения позиции через move() будут также интерпретироваться как абсолютные.

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

  • Позиция объекта фиксирована относительно контейнера.
  • Игнорируются предыдущие трансформации (если не учитывать transform()).
  • Удобно для изначального размещения элементов и строгого макета.

Относительные координаты

Относительные координаты задаются в виде смещения от текущей позиции объекта, либо в контексте трансформаций. В SVG.js это достигается методами вроде dx(), dy(), dmove(), где d обозначает “delta” — приращение.

Пример:

const circle = draw.circle(50).fill('#e74c3c').move(100, 100);

// Сдвигаем круг на 30px вправо и 20px вниз относительно текущей позиции
circle.dmove(30, 20);

После выполнения dmove центр круга переместится в (130, 120), а не в (30, 20). При этом важно, что dmove учитывает текущие координаты, а не абсолютное положение.

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

  • Удобны для анимаций и пошагового движения.
  • Позволяют создавать последовательные смещения без пересчета абсолютных координат.
  • Работают корректно при использовании групп (<g>), так как координаты элементов внутри группы суммируются с координатами группы.

Различия при трансформациях

При применении методов трансформации (rotate(), scale(), translate()) поведение координат изменяется:

  • Абсолютные координаты остаются фиксированными относительно контейнера, но визуально смещаются при translate().
  • Относительные координаты (dmove()) добавляются к уже трансформированным координатам.

Пример с группой:

const group = draw.group().move(50, 50);
const rect = group.rect(100, 50).fill('#2ecc71');

// Перемещаем группу
group.dmove(20, 20);

// Перемещаем прямоугольник внутри группы
rect.dmove(10, 10);

Итоговое положение прямоугольника: (50 + 20 + 10, 50 + 20 + 10) = (80, 80). Это наглядно демонстрирует накопительный эффект относительных координат внутри контейнера и групп.

Методы работы с координатами в SVG.js

Метод Тип координат Описание
move(x, y) абсолютные Устанавливает позицию элемента относительно контейнера
center(x, y) абсолютные Задаёт центр элемента в указанных координатах
dx(value) относительные Смещает элемент по X на value пикселей
dy(value) относительные Смещает элемент по Y на value пикселей
dmove(dx, dy) относительные Смещает элемент по X и Y одновременно
x() / y() абсолютные Получает или задаёт координату элемента по оси X/Y

Практические рекомендации

  • Для статичных макетов использовать move() и center() с абсолютными координатами.
  • Для анимированных или интерактивных объектов предпочтительно dmove(), dx(), dy() для пошаговых перемещений.
  • Группировка элементов облегчает работу с относительными координатами: смещение группы автоматически меняет положение всех вложенных элементов без изменения их локальных координат.
  • Комбинация абсолютных и относительных координат позволяет создавать сложные анимации: исходная точка задаётся абсолютной координатой, а движение — относительной.

Отслеживание координат

SVG.js предоставляет методы x(), y(), cx(), cy() для получения текущих координат элемента. При работе с относительными координатами можно использовать их, чтобы вычислить новое смещение:

const currentX = rect.x();
const currentY = rect.y();
rect.dmove(50 - currentX, 50 - currentY); // перемещаем в точку (50, 50) относительно текущей позиции

Такой подход объединяет гибкость относительных координат с точностью абсолютных.

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

Оглавление