Выборка элементов

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

Выбор элемента по ID

Каждый элемент, создаваемый в Snap.svg, может быть идентифицирован с помощью атрибута id. Для получения элемента используется метод select:

var s = Snap("#svg");
var circle = s.select("#myCircle");

Ключевой момент: select возвращает только первый найденный элемент, соответствующий селектору. Если элемента с указанным ID нет, возвращается null.

Выбор нескольких элементов

Для выборки группы элементов применяется метод selectAll. Этот метод принимает CSS-подобный селектор и возвращает коллекцию Snap.set:

var rectangles = s.selectAll("rect");

Коллекция позволяет выполнять действия над всеми элементами одновременно:

rectangles.attr({
    fill: "blue",
    stroke: "black"
});

Особенность: selectAll возвращает пустую коллекцию, если ни один элемент не найден. Работа с пустым набором не вызовет ошибок.

Использование CSS-селекторов

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

var redElements = s.selectAll(".red");
var specialElements = s.selectAll("[data-type='special']");
var complexSelector = s.selectAll("circle.red, rect.highlight");

Это позволяет фильтровать элементы по визуальным и семантическим признакам.

Работа с коллекциями элементов

Коллекции (Snap.set) предоставляют методы для пакетной работы с элементами. Основные методы:

  • forEach(callback) — перебор всех элементов с вызовом функции;
  • push(element) — добавление нового элемента в коллекцию;
  • attr(attributes) — установка атрибутов для всех элементов;
  • animate(attrs, duration, easing, callback) — анимация всех элементов коллекции.

Пример:

var set = Snap.set();
set.push(circle);
set.push(rectangles[0]);

set.attr({
    stroke: "green",
    strokeWidth: 2
});

Навигация по дереву элементов

Элементы Snap.svg организованы в иерархию DOM. Можно выбирать дочерние элементы через метод select или selectAll на конкретном элементе:

var group = s.group(circle, rect);
var childRect = group.select("rect");

Также поддерживается свойство children(), возвращающее массив всех прямых потомков:

var children = group.children();
children.forEach(function(el) {
    el.attr({ opacity: 0.5 });
});

Выбор по ссылке на переменную

При создании элемента Snap.svg метод возвращает объект элемента, который можно сохранить в переменной и использовать повторно:

var ellipse = s.ellipse(50, 50, 40, 20);
ellipse.attr({ fill: "yellow" });

Это позволяет обходиться без селекторов, если объект известен заранее.

Динамическая выборка

Для работы с элементами, которые создаются динамически, рекомендуется использовать комбинацию selectAll с атрибутами или классами:

var newCircle = s.circle(100, 100, 30).addClass("dynamic");
var dynamicElements = s.selectAll(".dynamic");

Это упрощает управление графикой при изменении структуры сцены.

Методы фильтрации

Snap.svg предоставляет возможность фильтровать набор элементов коллекции с помощью методов Jav * aScript:

var largeCircles = s.selectAll("circle").filter(function(el) {
    return el.attr("r") > 20;
});

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

Итоговые рекомендации по выборке

  • select — для одиночного элемента по ID или селектору.
  • selectAll — для группы элементов.
  • Использование классов и атрибутов повышает гибкость.
  • Коллекции Snap.set упрощают пакетные операции.
  • Для динамически создаваемых элементов полезно применять CSS-классы и фильтры.

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

Оглавление