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

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

var s = Snap("#svgCanvas");
var group1 = s.group();
var rect = s.rect(0, 0, 100, 50).attr({fill: "blue"});
var circle = s.circle(50, 50, 25).attr({fill: "red"});
group1.add(rect, circle);

В этом примере rect и circle объединены в одну группу. Любая трансформация, примененная к group1, затронет оба элемента одновременно.

Создание вложенных групп

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

var parentGroup = s.group();
var childGroup = s.group();

var rect1 = s.rect(10, 10, 50, 50).attr({fill: "green"});
var rect2 = s.rect(70, 10, 50, 50).attr({fill: "orange"});

childGroup.add(rect1, rect2);
parentGroup.add(childGroup);

parentGroup.transform("t100,50"); // сдвиг всей структуры

Здесь parentGroup управляет положением всего содержимого, включая childGroup, который в свою очередь содержит два прямоугольника.

Трансформации вложенных групп

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

childGroup.transform("r45"); // вращение дочерней группы
parentGroup.transform("t100,50 s1.5"); // масштаб и сдвиг всей структуры
  • tX,Y — сдвиг (translate)
  • rAngle — вращение (rotate)
  • sFactor — масштаб (scale)

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

Атрибуты и стили для вложенных групп

Группы позволяют задавать атрибуты всем элементам сразу. Атрибуты родительской группы распространяются на дочерние элементы, если они не переопределены у самого элемента.

var group = s.group(
    s.rect(0, 0, 40, 40),
    s.circle(20, 20, 15)
);

group.attr({stroke: "#000", strokeWidth: 2});

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

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

События в Snap.svg можно назначать как отдельным элементам, так и группам. При клике на группу событие срабатывает для всей группы, что удобно для интерактивных компонентов.

group.click(function() {
    this.attr({fill: "yellow"}); // перекрасить все элементы группы
});

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

Манипуляции с вложенными группами

Snap.svg предоставляет методы для работы с элементами внутри группы:

  • group.add(element) — добавление нового элемента
  • group.remove(element) — удаление элемента
  • group.clear() — удаление всех элементов внутри группы
  • group.select(selector) — выбор элемента по CSS-селектору внутри группы
var rect = s.rect(0, 0, 30, 30);
childGroup.add(rect);
childGroup.remove(rect); // удаление конкретного элемента

Анимации вложенных групп

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

parentGroup.animate({transform: "t200,100 r90"}, 1000, mina.easeinout);

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

Применение вложенных групп в практике

Вложенные группы особенно полезны для:

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

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

Оглавление