Применение стилей к группе

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

var paper = Snap(800, 600);
var circle = paper.circle(50, 50, 40);
var rect = paper.rect(100, 20, 80, 60);
var group = paper.group(circle, rect);

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

Применение стилей к группе

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

group.attr({
    fill: "#3498db",
    stroke: "#2c3e50",
    strokeWidth: 4
});
  • fill – задаёт заливку всех элементов группы, если они её не имеют индивидуально.
  • stroke – цвет обводки всех элементов.
  • strokeWidth – толщина линий.

Важно учитывать, что если отдельный элемент уже имеет fill или stroke, стиль группы не изменит его значение.

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

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

  • translate(x, y) – смещение группы по оси X и Y.
  • scale(sx, sy) – масштабирование. Если sy не указан, используется sx.
  • rotate(angle, cx, cy) – поворот относительно точки (cx, cy).

Пример комбинированного преобразования:

group.transform('t100,50 r45 100 50 s1.5');

Здесь группа смещается на (100, 50), поворачивается на 45° вокруг точки (100, 50) и масштабируется на 1.5 раза.

Использование CSS-подобных стилей

Snap.svg поддерживает некоторые CSS-подобные свойства, которые можно применять к группе:

group.attr({
    "opacity": 0.7,
    "fill-opacity": 0.5,
    "stroke-dasharray": "5, 5",
    "stroke-linecap": "round"
});
  • opacity – прозрачность всей группы.
  • fill-opacity – прозрачность заливки.
  • stroke-dasharray – создание пунктирной линии.
  • stroke-linecap – форма окончания линии (round, square, butt).

Все эти свойства применяются ко всем элементам группы одновременно, если они не переопределены на уровне элемента.

Динамическая смена стиля элементов группы

Можно изменять стиль группы в любой момент, что удобно для анимаций:

group.attr({ fill: "#e74c3c" });
setTimeout(() => group.attr({ fill: "#2ecc71" }), 1000);

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

group[0].attr({ fill: "#f1c40f" }); // изменяем только первый элемент

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

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

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

Эта анимация перемещает группу на (200, 100) и поворачивает её на 90° за 2 секунды с плавным эффектом.

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

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

var circle2 = paper.circle(200, 200, 30);
var subgroup = paper.group(circle2);
var mainGroup = paper.group(group, subgroup);

mainGroup.attr({ stroke: "#8e44ad", strokeWidth: 3 });

Все элементы внутри mainGroup получат общий цвет обводки и толщину линий.

Ключевые моменты

  • group() объединяет элементы для совместного управления.
  • attr() на группе задаёт стили для всех её элементов, если они не переопределены.
  • transform() позволяет смещать, вращать и масштабировать всю группу одновременно.
  • Группы поддерживают анимацию и CSS-подобные свойства.
  • Вложенные группы создают иерархию, где стили родителя наследуются дочерними элементами.

Использование групп повышает эффективность работы с SVG, сокращает дублирование кода и облегчает создание сложных графических структур.

Оглавление