Определение позиции элемента

Для работы с элементами SVG через библиотеку SVG.js необходимо сначала создать контейнер. Контейнер — это базовый <svg>-элемент, внутри которого будут располагаться все графические объекты.

// Создание контейнера SVG
const draw = SVG().addTo('#canvas').size(600, 400);
  • SVG() — создаёт объект библиотеки.
  • addTo('#canvas') — указывает, куда в DOM вставить SVG-контейнер.
  • size(width, height) — задаёт размеры SVG-контейнера.

Контейнер может быть как встроенным в HTML, так и созданным динамически.

Основные методы позиционирования

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

move(x, y)

Позволяет переместить элемент в новые координаты относительно родительского контейнера.

const rect = draw.rect(100, 50).fill('#f06');
rect.move(150, 100); // верхний левый угол в точку (150, 100)
  • x и y задают положение верхнего левого угла элемента.
  • Метод возвращает объект для цепочки вызовов.

x() и y()

Позволяют получить или установить отдельные координаты.

rect.x(200); // изменить координату X
rect.y(120); // изменить координату Y
console.log(rect.x(), rect.y()); // получить текущие координаты

cx() и cy()

Работают с центром элемента, что особенно удобно для кругов или анимаций.

const circle = draw.circle(80).fill('#0f6');
circle.cx(300).cy(200); // центр круга в точке (300, 200)
  • Эти методы полезны, когда требуется позиционировать элемент по его центру, а не по верхнему левому углу.

Работа с атрибутами позиции

SVG.js позволяет напрямую управлять атрибутами x, y, cx, cy, а также трансформациями через методы attr() и transform().

rect.attr({ x: 50, y: 75 }); // альтернативный способ задания позиции
circle.transform({ translateX: 50, translateY: 30 }); // смещение через трансформацию
  • attr() напрямую изменяет атрибуты SVG.
  • transform() позволяет применять сложные операции: перенос, масштабирование, вращение.

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

Методы dx() и dy() позволяют сдвигать элемент относительно текущего положения:

rect.dx(20); // сдвиг по X на 20 единиц
rect.dy(-10); // сдвиг по Y на -10 единиц
  • Отличие от move() в том, что move() задаёт абсолютное положение, а dx()/dy() — относительное смещение.

Привязка к родительским элементам

SVG.js поддерживает группировку через group(). Координаты дочерних элементов зависят от позиции группы:

const group = draw.group();
const rectInGroup = group.rect(50, 50).fill('#09f');
group.move(100, 50); // все элементы группы смещаются вместе
  • Перемещение группы влияет на все вложенные элементы.
  • Координаты внутри группы остаются относительными к группе.

Применение трансформаций

Помимо прямого задания x и y, позицию элементов можно изменять через трансформации:

rect.transform({
  rotate: 45,       // вращение
  translateX: 30,   // сдвиг по X
  translateY: 50    // сдвиг по Y
});
  • Комбинируя rotate, scale и translate, можно создавать сложные анимации и эффекты.
  • Порядок применения трансформаций важен: сначала масштаб, затем поворот, затем смещение.

Получение текущей позиции элемента

Для получения текущей позиции используются методы x(), y(), cx(), cy(), а также bbox():

const box = rect.bbox();
console.log(box.x, box.y, box.width, box.height);
  • bbox() возвращает bounding box элемента: координаты верхнего левого угла и размеры.
  • Это удобно для вычислений столкновений или размещения элементов относительно друг друга.

Сравнение координат и позиционирование по сетке

Для упрощения работы с расположением элементов часто используют вспомогательные функции:

function snapToGrid(element, gridSize) {
  const x = Math.round(element.x() / gridSize) * gridSize;
  const y = Math.round(element.y() / gridSize) * gridSize;
  element.move(x, y);
}

snapToGrid(rect, 20); // привязка к сетке 20x20
  • Позволяет стандартизировать расположение элементов.
  • Особенно полезно для редакторов SVG и визуальных интерфейсов.

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

Текстовые элементы позиционируются через x(), y(), cx(), cy(), а также можно управлять выравниванием:

const text = draw.text('Пример текста').font({ size: 24 });
text.cx(300).cy(50); // центр текста в точке (300, 50)
text.attr({ 'text-anchor': 'middle' }); // выравнивание по центру
  • Атрибут text-anchor управляет точкой привязки текста.
  • Использование cx() и cy() упрощает точное размещение по центру.

Итоговая схема позиционирования

  • Абсолютное положение: move(x, y) и attr({ x, y }).
  • Относительное смещение: dx(), dy().
  • Центрирование: cx(), cy().
  • Группы: координаты внутри группы — относительные.
  • Трансформации: transform({ translateX, translateY, rotate, scale }).
  • Bounding box: bbox() для анализа позиции и размеров.

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

Оглавление