Область видимости определений

Для работы с Snap.svg необходимо создать объект холста, на котором будут размещаться все элементы SVG. Создание холста выполняется через функцию Snap():

var s = Snap(800, 600); // создаёт холст шириной 800px и высотой 600px

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

var circle = s.circle(150, 150, 100); // создаёт круг с центром в (150,150) и радиусом 100

Элемент circle существует только в контексте холста s и не может быть напрямую добавлен в другой холст без копирования или перемещения.

Локальные и глобальные переменные

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

function createCircle() {
    var localCircle = s.circle(200, 200, 50);
}
createCircle();
console.log(localCircle); // Ошибка: localCircle не определён вне функции

Чтобы сделать элемент доступным глобально, его необходимо объявить в глобальной области видимости:

var globalCircle = s.circle(300, 300, 50);
console.log(globalCircle); // Доступен глобально

Snap.svg не имеет отдельного механизма для глобальных или локальных элементов — это полностью определяется правилами JavaScript.

Группы и вложенность элементов

Snap.svg позволяет объединять элементы в группы (g). Это создаёт локальную область видимости для координат и трансформаций внутри группы:

var group = s.group();
var rect = s.rect(0, 0, 100, 50);
var circle = s.circle(50, 25, 20);
group.add(rect, circle);

Трансформации, применяемые к группе, влияют на все её дочерние элементы, но не на элементы вне группы:

group.transform('t100,50'); // сдвигает группу на 100px по X и 50px по Y
  • Ключевой момент: координаты элементов внутри группы считаются относительно группы.
  • Доступность элементов: элементы внутри группы остаются доступными через переменные, в которых они были созданы, или через методы группы:
var firstChild = group[0]; // доступ к первому элементу группы

Определения (defs) и их область видимости

Элементы внутри <defs> используются для повторного применения (например, градиенты, маски, паттерны). Snap.svg предоставляет метод paper.defs для доступа к контейнеру определений:

var gradient = s.gradient("r(0.5, 0.5, 0.5)#fff-#000");
s.defs.append(gradient); // добавление в <defs>

Область видимости элементов в <defs> ограничена холстом, в котором они определены:

  • Элемент внутри <defs> нельзя напрямую использовать в другом холсте.
  • Для использования необходимо скопировать определение или повторно создать его на другом холсте.
var rect = s.rect(0, 0, 100, 100).attr({ fill: gradient });

Градиент применился к прямоугольнику только потому, что gradient существует в том же холсте s.

Локальные функции и замыкания

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

circle.click(function() {
    var clickCount = 0;
    clickCount++;
    console.log(clickCount); // всегда 1, потому что переменная локальная
});

Чтобы сохранить состояние между вызовами, переменные должны быть объявлены вне функции:

var clickCount = 0;
circle.click(function() {
    clickCount++;
    console.log(clickCount); // увеличивается с каждым кликом
});

Область видимости атрибутов и стилей

Snap.svg поддерживает установку атрибутов и стилей через метод attr(). Атрибуты элемента локальны для этого элемента и не влияют на другие элементы, даже если они имеют одинаковый тип:

var rect1 = s.rect(10, 10, 50, 50).attr({ fill: 'red' });
var rect2 = s.rect(70, 10, 50, 50).attr({ fill: 'blue' });

rect1.attr('fill'); // 'red'
rect2.attr('fill'); // 'blue'

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

Вывод

Snap.svg реализует строгую иерархическую область видимости:

  • Холст определяет верхний уровень видимости.
  • Группы создают локальные контексты координат и трансформаций.
  • <defs> локальны для холста и используются для повторного применения.
  • Переменные JavaScript и функции управляют доступностью элементов и их состоянием.
  • Атрибуты элементов локальны, наследуются внутри группы, но не между отдельными элементами без явного связывания.

Понимание этих принципов критично для эффективного построения сложных интерактивных SVG-композиций.

Оглавление