Создание групп (g)

Snap.svg предоставляет возможность объединять несколько графических объектов в одну группу (<g>), что значительно упрощает управление сложными композициями. Группа позволяет применять трансформации, стили и события ко всем вложенным элементам одновременно, сохраняя их относительные координаты.

Создание группы выполняется с помощью метода paper.group(). Пример:

var s = Snap(800, 600);
var rect = s.rect(10, 10, 100, 50);
var circle = s.circle(50, 50, 25);

var group = s.group(rect, circle);

В этом примере rect и circle объединяются в объект group. Любое последующее действие с group будет применяться сразу к обоим элементам.

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

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

var ellipse = s.ellipse(150, 50, 30, 20);
group.add(ellipse);

Теперь ellipse автоматически наследует все трансформации и стили группы. Чтобы удалить элемент из группы, используется exclude():

group.exclude(circle);

После этого circle перестает быть частью группы, но продолжает существовать на холсте как самостоятельный элемент.

Применение трансформаций к группе

Группы позволяют удобно применять трансформации, которые будут действовать на все вложенные элементы одновременно:

  • Перемещение: group.transform('t100,50'); — смещает всю группу на 100px по X и 50px по Y.
  • Масштабирование: group.transform('s2'); — увеличивает группу в 2 раза относительно её центра.
  • Вращение: group.transform('r45,100,100'); — поворот на 45 градусов относительно точки (100,100).

Важно помнить, что Snap.svg применяет трансформации в виде строки, поддерживая несколько операций одновременно, например:

group.transform('t50,50 r30 s1.5');

Наследование стилей

Любой стиль, применённый к группе, наследуется всеми её элементами:

group.attr({
    fill: '#f06',
    stroke: '#000',
    strokeWidth: 2
});

В этом примере все объекты внутри группы становятся красными с чёрной рамкой толщиной 2px. Если отдельный элемент внутри группы имеет собственный стиль, он перекрывает стиль группы.

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

Snap.svg поддерживает создание вложенных групп, что позволяет строить сложные иерархические структуры:

var innerGroup = s.group(s.rect(0, 0, 30, 30), s.circle(15, 15, 10));
var outerGroup = s.group(innerGroup, s.line(0, 0, 50, 50));

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

События для группы

На группу можно назначать обработчики событий, которые срабатывают при взаимодействии с любым её элементом:

group.click(function() {
    this.attr({fill: '#0f0'});
});

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

Анимация группы

Snap.svg позволяет анимировать группы целиком с помощью метода animate():

group.animate({ transform: 't200,0 r360' }, 2000, mina.easeinout);

В течение 2 секунд группа переместится на 200px по X и выполнит полный оборот на 360°. При этом все вложенные элементы сохраняют свои относительные координаты.

Практические советы

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

Группы в Snap.svg — мощный инструмент для создания динамических, интерактивных и структурированных графических сцен, позволяющий значительно сократить код и повысить управляемость элементов.

Оглавление