Выравнивание и позиционирование

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

const draw = SVG().addTo('body').size(600, 400);
const rect = draw.rect(100, 50).fill('#f06').move(50, 50);

В данном примере move(x, y) задаёт верхний левый угол прямоугольника в координатах (50, 50).

Абсолютное и относительное позиционирование

  • Абсолютное позиционирование задаётся методами move(x, y) для прямоугольников, эллипсов и текста, center(x, y) для центровки, а также plot() для сложных форм.
  • Относительное позиционирование реализуется через dx(), dy() для смещения текущих координат, или через метод dmove(dx, dy) для кривых и многоугольников.
rect.dx(20).dy(10);   // смещает прямоугольник на 20 по X и 10 по Y
rect.dmove(15, 25);   // смещает относительно текущего положения

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

Центрирование элементов

Метод center(x, y) позволяет разместить элемент по центру указанных координат. Для сложных объектов, таких как группы (g), координаты центра рассчитываются относительно bounding box.

const circle = draw.circle(80).fill('#0f9').center(300, 200);

Важно: метод center() изменяет координаты cx и cy для круга и эллипса, или сдвигает верхний левый угол для прямоугольника и текста так, чтобы элемент оказался по центру указанных координат.

Использование групп для позиционирования

Группы (group) позволяют работать с несколькими элементами как с единым объектом. Позиционирование группы перемещает все вложенные элементы одновременно.

const group = draw.group();
group.add(rect);
group.add(circle);
group.move(100, 50);
  • move(x, y) смещает всю группу относительно исходного положения.
  • center(x, y) центрует группу по указанным координатам.
  • Внутри группы объекты можно позиционировать относительно группы с помощью move() или dx()/dy().

Выравнивание элементов

SVG.js поддерживает выравнивание элементов по горизонтали и вертикали с использованием комбинаций координат и размеров:

  • Горизонтальное выравнивание: left(), right(), cx()
  • Вертикальное выравнивание: top(), bottom(), cy()

Пример выравнивания прямоугольников по центру:

const rect1 = draw.rect(50, 50).fill('#ff0').move(0, 0);
const rect2 = draw.rect(50, 50).fill('#0ff').move(100, 0);

// Центрирование второго прямоугольника относительно первого
rect2.cx(rect1.cx());
rect2.cy(rect1.cy());

Работа с привязкой к границам контейнера

Методы attr() и viewbox() позволяют учитывать размеры холста при позиционировании:

draw.viewbox(0, 0, 600, 400);

const rect = draw.rect(100, 50).fill('#f09').move(draw.width() - 100, draw.height() - 50);
  • draw.width() и draw.height() возвращают текущие размеры SVG-контейнера.
  • Позиционирование с учётом границ контейнера удобно для адаптивной верстки и динамических интерфейсов.

Трансформации для точного позиционирования

Методы translate(), rotate(), scale() позволяют управлять положением элементов через матрицу трансформаций:

rect.translate(50, 30).rotate(45, rect.cx(), rect.cy());
  • translate(x, y) перемещает элемент относительно текущей позиции.
  • rotate(angle, cx, cy) вращает элемент вокруг точки (cx, cy).
  • scale(sx, sy) масштабирует элемент по осям X и Y, центр масштабирования задаётся через cx() и cy().

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

Выравнивание текста и сложных элементов

Для текста метод leading(), font-size(), text-anchor() и dominant-baseline обеспечивают точное вертикальное и горизонтальное выравнивание внутри SVG-контейнера или группы:

const text = draw.text('Привет SVG').font({ size: 24, anchor: 'middle', leading: '1.2em' }).center(300, 200);
  • anchor: 'middle' выравнивает текст по горизонтали.
  • dominant-baseline: 'middle' помогает выровнять текст вертикально относительно центра.

Итоговая структура позиционирования

  1. Создание элемента через rect(), circle(), text() и др.
  2. Определение координат с move() или center().
  3. Смещение и корректировка через dx(), dy(), dmove().
  4. Группировка элементов с group() для совместного позиционирования.
  5. Использование трансформаций для сложных сдвигов, вращений и масштабирования.
  6. Выравнивание по границам и центру с помощью cx(), cy(), left(), right(), top(), bottom().
  7. Точное выравнивание текста с использованием anchor и dominant-baseline.

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

Оглавление