Система координат и единицы измерения

SVG.js использует стандартную систему координат SVG, где начало координат (0, 0) находится в верхнем левом углу контейнера SVG. Ось X направлена вправо, ось Y — вниз. Каждая графическая фигура в SVG позиционируется относительно этих координат. Понимание системы координат критично для точного размещения элементов и управления трансформациями.

В SVG.js позиционирование элементов осуществляется с помощью методов move(x, y) и x() / y(). Например:

const draw = SVG().addTo('body').size(500, 500);
const rect = draw.rect(100, 50).move(50, 75);

В этом примере прямоугольник шириной 100 и высотой 50 будет расположен в точке (50, 75) относительно верхнего левого угла SVG-контейнера.

Ключевой момент: координаты элементов указываются от их верхнего левого угла, за исключением некоторых фигур (например, кругов, эллипсов), где координаты задают центр фигуры.

Единицы измерения

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

  • px — пиксели, основной тип, используемый по умолчанию.
  • % — относительные единицы, вычисляемые относительно размеров родительского контейнера.
  • em / rem — используются для шрифтовых элементов.
  • cm, mm, in, pt, pc — физические единицы, встречаются реже, но поддерживаются спецификацией SVG.

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

const circle = draw.circle('50%').move('25%', '25%');

Здесь радиус круга равен половине ширины контейнера SVG, а позиция — четверть ширины и высоты.

Важно: при смешении абсолютных и относительных единиц расчёт координат может вести к неожиданным результатам, особенно при динамическом изменении размеров контейнера.

Трансформации и система координат

SVG.js предоставляет методы для трансформации элементов: translate(x, y), rotate(angle, cx, cy), scale(sx, sy). Эти трансформации выполняются относительно текущей системы координат элемента. Например:

rect.rotate(45, rect.cx(), rect.cy());

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

Совет: всегда проверять порядок применения трансформаций, так как они выполняются последовательно и могут влиять друг на друга.

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

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

  1. Абсолютные координаты — позиция задается относительно верхнего левого угла контейнера. Используются методы move(x, y), cx(), cy().
  2. Относительные координаты — смещения относительно текущего положения элемента. Используются методы dmove(dx, dy) и draggable().

Пример смещения элемента:

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

Ключевое отличие: move() задает новую абсолютную позицию, а dmove() — перемещает элемент на заданное расстояние от текущей позиции.

Координаты для сложных фигур

Для многоугольников, линий и путей координаты задаются массивами точек или строками команд:

const poly = draw.polygon('50,0 100,50 50,100 0,50').fill('none').stroke({width: 2});

Каждая пара чисел определяет точку в системе координат SVG. Методы plot() позволяют динамически изменять координаты после создания фигуры:

poly.plot('0,0 50,0 25,50');

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

Привязка и выравнивание

SVG.js поддерживает методы выравнивания относительно контейнера: center(x, y) и cx() / cy(). Это позволяет быстро позиционировать элементы:

rect.center(250, 250); // центрирует прямоугольник по середине контейнера

Для групп (group) координаты всех вложенных элементов интерпретируются относительно координат группы, что упрощает создание комплексных композиций и управление трансформациями.

Масштабирование и viewBox

Система координат SVG тесно связана с атрибутом viewBox, который задаёт виртуальное пространство для всех элементов:

const draw = SVG().addTo('body').size(400, 400).viewbox(0, 0, 200, 200);

Здесь всё содержимое SVG масштабируется в диапазон от 0 до 200 по X и Y, независимо от размеров контейнера. Это особенно важно для адаптивной графики и работы с единицами %.

Важное замечание: при масштабировании через viewBox все координаты и размеры элементов пересчитываются относительно новой системы координат, но трансформации (rotate, scale) работают с локальными координатами элементов.

Итоговые рекомендации по системе координат

  • Всегда учитывать, что ось Y направлена вниз.
  • Использовать move и dmove для абсолютного и относительного позиционирования.
  • Для сложных фигур работать с массивами координат и методом plot().
  • Применять трансформации через translate, rotate, scale последовательно.
  • Использовать viewBox для масштабирования и адаптивного дизайна.
  • Для центровки и выравнивания применять center, cx, cy.

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

Оглавление