Группировка с масками

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

var s = Snap("#svg");
var circle = s.circle(50, 50, 40).attr({fill: "red"});
var rect = s.rect(30, 30, 60, 60).attr({fill: "blue"});
var group = s.group(circle, rect);

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

group.transform('t100,50 r45');

Здесь t100,50 — это сдвиг на 100px по X и 50px по Y, а r45 — поворот на 45 градусов относительно центра группы.

Маски в Snap.svg

Маска (mask) в SVG позволяет управлять видимостью частей объекта. В Snap.svg маски создаются с помощью метода mask(), который принимает элемент или группу, определяющую форму маски. Белые участки маски остаются видимыми, черные — скрываются.

var circleMask = s.circle(50, 50, 40).attr({fill: "#fff"});
var maskGroup = s.group(circleMask);
var rect = s.rect(0, 0, 100, 100).attr({fill: "blue"});
rect.attr({mask: maskGroup});

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

Совмещение групп и масок

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

var s = Snap("#svg");

var circle = s.circle(50, 50, 40).attr({fill: "red"});
var rect = s.rect(30, 30, 60, 60).attr({fill: "green"});
var ellipse = s.ellipse(70, 70, 20, 40).attr({fill: "yellow"});

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

var maskShape = s.rect(40, 40, 50, 50).attr({fill: "#fff"});
var mask = s.group(maskShape);

group.attr({mask: mask});

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

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

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

group.animate({transform: 't100,0'}, 2000, mina.easeinout);
maskShape.animate({transform: 't50,50'}, 2000, mina.easeinout);

Здесь одновременно анимируется и группа, и маска, создавая эффект «движущейся видимой области».

Особенности работы с масками

  1. Цвет маски имеет значение: белый цвет показывает элементы, черный скрывает, серые оттенки создают полупрозрачные эффекты.
  2. Маска наследует трансформации группы: если группа движется или масштабируется, маска перемещается вместе с ней.
  3. Маска может содержать несколько элементов: например, сложную композицию из кругов и прямоугольников.
var maskPart1 = s.circle(50, 50, 30).attr({fill: "#fff"});
var maskPart2 = s.rect(60, 60, 30, 30).attr({fill: "#fff"});
var complexMask = s.group(maskPart1, maskPart2);
group.attr({mask: complexMask});

Применение маски к отдельным элементам внутри группы

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

circle.attr({mask: maskPart1});

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

Работа с вложенными группами и масками

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

var innerGroup = s.group(s.circle(20, 20, 10).attr({fill: "pink"}));
var outerGroup = s.group(innerGroup, s.rect(0, 0, 50, 50).attr({fill: "orange"}));
var maskOuter = s.rect(10, 10, 40, 40).attr({fill: "#fff"});
outerGroup.attr({mask: maskOuter});

Здесь внутренняя группа анимируется или трансформируется независимо, но маска применяется ко всей внешней группе.

Полезные методы для работы с группами и масками

  • group.add(element) — добавляет элемент в группу после её создания.
  • group.remove(element) — удаляет элемент из группы.
  • group.selectAll("circle") — выбирает все элементы типа circle внутри группы.
  • group.attr({mask: mask}) — назначает маску на всю группу.
  • element.attr({mask: mask}) — назначает маску на отдельный элемент.

Использование этих методов в комбинации с трансформациями и анимациями позволяет создавать динамичные, интерактивные и сложные SVG-сцены.

Оглавление