Расстояния между элементами

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

Координатная система SVG

SVG использует систему координат с началом в верхнем левом углу контейнера: координата (0, 0) находится в верхнем левом углу, положительные значения по оси X идут вправо, по оси Y — вниз.

Пример создания контейнера и координатного пространства:

const draw = SVG().addTo('body').size(600, 400);

Эта строка создаёт контейнер SVG размером 600×400 пикселей. Все элементы, добавленные в этот контейнер, будут позиционироваться относительно его координат.

Работа с позиционированием элементов

Каждый элемент SVG имеет методы .x(), .y() и .move(x, y), позволяющие управлять его положением. Для прямоугольника:

const rect1 = draw.rect(100, 50).fill('#3498db').move(50, 50);
const rect2 = draw.rect(100, 50).fill('#e74c3c').move(200, 50);
  • rect1 находится в позиции (50, 50).
  • rect2 смещён на 200 по X, создавая промежуток между элементами.

Для динамического вычисления расстояния между элементами можно использовать методы .x() и .width():

const spacing = 20;
rect2.move(rect1.x() + rect1.width() + spacing, rect1.y());

Теперь rect2 всегда будет находиться на 20 пикселей правее rect1, независимо от размера первого прямоугольника.

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

SVG.js позволяет объединять элементы в группы с помощью метода .group(). Это облегчает управление расстояниями между несколькими элементами сразу:

const group = draw.group();
group.add(rect1);
group.add(rect2);

// Сдвиг всей группы
group.move(100, 100);

Позиционирование группы влияет на все её дочерние элементы, сохраняя их относительные расстояния.

Отступы и выравнивание

Для создания равномерных промежутков между элементами удобно использовать циклы и массивы:

const colors = ['#3498db', '#e74c3c', '#2ecc71'];
const elements = [];

colors.forEach((color, i) => {
    const rect = draw.rect(80, 40).fill(color);
    rect.move(i * (80 + 15), 50); // 15 — отступ между элементами
    elements.push(rect);
});
  • Каждый новый элемент смещается на ширину предыдущего плюс отступ.
  • Такой подход позволяет легко масштабировать количество элементов и изменять промежутки.

Работа с текстом и inline-элементами

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

const text1 = draw.text('Привет').font({ size: 24 });
const text2 = draw.text('SVG.js').font({ size: 24 });

const spacing = 10;
text2.move(text1.bbox().x2 + spacing, text1.y());

Метод .bbox() возвращает габариты элемента (x, y, width, height), что позволяет точно вычислить промежутки между текстовыми блоками и графикой.

Использование трансформаций для регулировки расстояний

SVG.js поддерживает трансформации через .translate(), .scale() и .rotate(). Трансляция позволяет изменять позицию без изменения исходных координат:

rect1.translate(30, 0); // смещает rect1 вправо на 30 пикселей

Комбинация трансляции с .group() помогает создавать сложные макеты с равными промежутками.

Автоматическое выравнивание

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

const containerWidth = draw.width();
const totalWidth = elements.reduce((sum, el) => sum + el.width(), 0);
const spacing = (containerWidth - totalWidth) / (elements.length + 1);

let currentX = spacing;
elements.forEach(el => {
    el.move(currentX, 100);
    currentX += el.width() + spacing;
});
  • Такой метод обеспечивает равные промежутки независимо от количества элементов.
  • Особенно полезно для динамически изменяемого контента.

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

  • Всегда учитывать координатную систему SVG и методы .x(), .y(), .move().
  • Для динамических макетов использовать .bbox() и вычисления на основе размеров элементов.
  • Группировать элементы для удобного смещения и сохранения относительных расстояний.
  • Использовать циклы и массивы для равномерного распределения элементов.
  • Применять трансформации и вычисления контейнера для адаптивного выравнивания.

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

Оглавление