Атрибуты групп

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

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

В этом примере создается круг и прямоугольник, после чего оба элемента объединяются в группу group.

Атрибуты групп

Группы в Snap.svg наследуют большинство стандартных SVG-атрибутов, включая:

  • transform – трансформация группы (перемещение, масштаб, вращение).
  • opacity – прозрачность всей группы.
  • fill и stroke – базовые цвета элементов внутри группы, если они не имеют индивидуальных атрибутов.
  • class и id – позволяют стилизовать группу через CSS или идентифицировать её в коде.

Пример изменения атрибутов группы:

group.attr({
    transform: "translate(200, 50) rotate(45)",
    opacity: 0.7,
    fill: "#3498db",
    stroke: "#2980b9",
    strokeWidth: 4
});
  • translate(x, y) перемещает всю группу на заданные координаты.
  • rotate(angle, cx, cy) вращает группу относительно точки (cx, cy). Если точки не заданы, используется центр координат SVG.
  • opacity устанавливает прозрачность сразу всех элементов группы.
  • fill и stroke применяются к элементам, не имеющим собственных значений этих атрибутов.

Наследование атрибутов

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

var circle2 = s.circle(200, 100, 50).attr({ fill: "red" });
var rect2 = s.rect(150, 50, 100, 100);
var group2 = s.group(circle2, rect2);
group2.attr({ fill: "green" });

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

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

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

group.transform("s1.5 r30 t100,50");
  • s1.5 – масштабирование группы в 1.5 раза.
  • r30 – вращение на 30 градусов.
  • t100,50 – смещение группы по оси X на 100 и по оси Y на 50.

Важно помнить, что трансформации группы суммируются с трансформациями элементов внутри неё.

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

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

group.animate({ transform: "t300,0" }, 2000, mina.easeinout);

Все элементы внутри группы плавно переместятся на 300 пикселей по оси X за 2 секунды с эффектом ease-in-out. Использование групп упрощает создание сложных анимаций для нескольких объектов одновременно.

Работа с дочерними элементами группы

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

  • .selectAll() – возвращает массив всех дочерних элементов.
  • .forEach() – применяет функцию к каждому дочернему элементу.
group.forEach(function(el){
    el.attr({ stroke: "#e74c3c" });
});

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

Использование классов и стилей

К группам можно добавлять CSS-классы для управления стилями через внешние таблицы стилей:

group.addClass("highlighted");

В CSS можно задать свойства для класса:

.highlighted {
    fill: yellow;
    stroke: black;
    stroke-width: 2;
}

Это позволяет создавать динамическое оформление без необходимости напрямую менять атрибуты через JavaScript.

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

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

var subGroup = s.group(s.circle(0,0,20), s.rect(-10,-10,20,20));
var mainGroup = s.group(subGroup, s.text(50,50,"Label"));
mainGroup.attr({ transform: "translate(100,100)" });

Трансформация mainGroup применяется ко всем элементам, включая подгруппу, сохраняя относительное расположение дочерних элементов.

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

Оглавление