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

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

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

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

const rect = group.rect(100, 50).fill('red');
const circle = group.circle(40).fill('blue').move(50, 25);

После добавления элементов в группу они становятся зависимыми от трансформаций группы. Это означает, что любые перемещения, масштабирование или вращение, применённые к группе, автоматически затрагивают все её дочерние элементы.

Трансформации групп

Перемещение группы

group.move(200, 100);

Все элементы внутри группы смещаются на указанные координаты относительно исходного положения.

Масштабирование группы

group.scale(1.5);

Изменяет размеры всех дочерних объектов пропорционально заданному коэффициенту. Масштабирование происходит относительно точки (0,0) группы, если не указана другая ось.

Вращение группы

group.rotate(45, 100, 50);

Вращает все элементы группы на 45 градусов вокруг точки (100,50) внутри группы.

Вложенные группы

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

const subgroup = group.group();
subgroup.rect(50, 50).fill('green');
subgroup.move(30, 30);
group.rotate(30); // поворот всей группы, включая подгруппу

Манипуляция элементами внутри группы

Доступ к элементам

Элементы внутри группы можно получить через методы children() или each():

group.each(function(i, children) {
  this.fill('orange'); // изменяет заливку всех дочерних объектов
});

Удаление элементов из группы

circle.remove(); // удаляет элемент из группы, не затрагивая другие

Добавление элементов после создания группы

const line = draw.line(0,0,100,100).stroke({ width: 2, color: 'black' });
group.add(line); // добавляет линию в существующую группу

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

Группы особенно полезны при анимации комплексных объектов. Анимация, применённая к группе, автоматически распространяется на все её элементы:

group.animate(2000).move(300, 200).scale(2);

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

rect.animate(1000).fill('yellow');

Ключевые методы и свойства групп

Метод / Свойство Описание
group() Создаёт новую группу
add(element) Добавляет элемент в группу
remove(element) Удаляет элемент из группы
children() Получает массив дочерних элементов
each(callback) Итерация по всем элементам группы
move(x, y) Перемещает группу
scale(factor) Масштабирует группу
rotate(angle, cx, cy) Вращает группу вокруг точки

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

  • Композиция сложных фигур: создание многослойных объектов, где каждый слой — отдельная группа.
  • Сценарии трансформаций: поворот, масштабирование или перемещение всех объектов одновременно.
  • Анимация объектов: единая анимация для всей композиции или независимые анимации для дочерних элементов.
  • Управление слоями: упрощение структуры SVG для удобного редактирования и контроля видимости.

Советы по оптимизации

  • Стараться минимизировать количество вложенных групп, чтобы не создавать чрезмерную иерархию.
  • Использовать группы для логической организации сцены, а не только для визуальных эффектов.
  • При больших сценах применять each() с осторожностью, так как перебор всех элементов может влиять на производительность.

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

Оглавление