Методы Set

Объект Set в Snap.svg представляет собой коллекцию элементов SVG, объединённых для совместного управления. С помощью Set можно применять трансформации, атрибуты и события сразу ко всем элементам коллекции, что значительно упрощает работу с группами графических объектов. В отличие от <g> в SVG, Set не создаёт новый DOM-элемент, а является чисто программным объединением.

Создание Set выполняется через метод paper.set():

var s = Snap("#svg");
var circle = s.circle(50, 50, 40);
var rect = s.rect(100, 20, 80, 60);

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

В этом примере создаётся Set, содержащий круг и прямоугольник. Элементы можно добавлять динамически с помощью метода push():

var ellipse = s.ellipse(200, 80, 50, 25);
set.push(ellipse);

Set хранит элементы в порядке добавления, доступ к ним осуществляется через индекс: set[0] — первый элемент, set[1] — второй и так далее.

Применение атрибутов к Set

Метод attr() позволяет установить атрибуты одновременно для всех элементов Set. Аргументом может быть объект с именами атрибутов и их значениями:

set.attr({
    fill: "red",
    stroke: "black",
    strokeWidth: 2
});

Атрибуты применяются ко всем элементам коллекции. Если один из элементов не поддерживает конкретный атрибут, Snap.svg его игнорирует без ошибки.

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

var fillColor = set[0].attr("fill"); // возвращает "red"

Трансформации множества элементов

Set поддерживает трансформации, такие как translate, rotate, scale и matrix. Они применяются ко всем элементам одновременно, сохраняя их относительное положение.

Перемещение всех элементов:

set.transform('t50,50'); // смещение на 50px по X и Y

Метод transform() принимает строку, содержащую последовательность трансформаций в формате SVG. Для более гибкой работы можно комбинировать несколько трансформаций:

set.transform('t50,50r45,100,100s1.5,1.5');

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

Анимация Set

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

set.animate({ transform: 't100,0' }, 1000, mina.easeinout);

Все элементы смещаются на 100px по X за 1 секунду с заданной функцией ускорения. Анимации для Set синхронизированы, элементы начинают и заканчивают движение одновременно.

Работа с событиями

Set поддерживает установку событий через методы click(), hover(), mousedown(), mouseup() и другие. События будут применяться ко всем элементам Set:

set.click(function() {
    this.attr({ fill: "blue" });
});

Внутри обработчика this ссылается на конкретный элемент, по которому произошло событие.

Методы управления элементами внутри Set

  • push(element1, element2, ...) — добавляет один или несколько элементов в Set.
  • pop() — удаляет последний элемент и возвращает его.
  • splice(index, count, element1, ...) — удаляет count элементов начиная с index и добавляет новые элементы.
  • clear() — очищает Set, оставляя его пустым, но не удаляя элементы из DOM.
  • exclude(element) — создаёт новый Set, исключающий указанный элемент.
  • forEach(callback) — позволяет выполнить функцию для каждого элемента Set:
set.forEach(function(el, i) {
    el.attr({ opacity: 0.5 });
});
  • getBBox() — возвращает общую bounding box для всех элементов Set, что удобно для позиционирования и коллизий.

Вложенные Set

Set может содержать другие Set, создавая иерархию. Применение атрибутов и трансформаций распространяется рекурсивно:

var innerSet = s.set(circle);
var outerSet = s.set(innerSet, rect);

outerSet.attr({ stroke: "green" });

Все элементы, включая вложенные, получат зелёную обводку.

Советы по производительности

  • Set не создаёт дополнительный DOM-элемент, поэтому лучше использовать его для объединения элементов на уровне скрипта, а не для визуальной группировки.
  • Для анимации больших Set рекомендуется минимизировать сложные трансформации отдельных элементов.
  • Использование forEach() и attr() на Set часто эффективнее, чем применение изменений к каждому элементу отдельно.

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

Оглавление