Обертки и хелперы

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

Простейший способ создания обертки — использовать метод Snap() для получения холста:

var s = Snap(800, 600); // создаем SVG холст размером 800x600

Эта переменная s сама по себе является оберткой для SVG-контейнера. Через неё можно создавать фигуры:

var circle = s.circle(150, 150, 100); // создаем круг с центром (150,150) и радиусом 100
circle.attr({
    fill: "#3498db",
    stroke: "#2c3e50",
    strokeWidth: 5
});

Каждый созданный элемент (circle, rect, path) является оберткой, которая предоставляет следующие возможности:

  • Манипуляция атрибутами: element.attr({}) позволяет устанавливать или получать атрибуты SVG.
  • Трансформации: element.transform("r45") поворачивает элемент на 45 градусов. Поддерживаются комбинированные трансформации: "t100,50 r30 s2,2".
  • События: element.click(handler) или element.hover(enterHandler, leaveHandler).

Метод attr и работа с атрибутами

Метод attr является ключевым хелпером для работы с элементами:

circle.attr({
    fill: "#e74c3c",
    stroke: "#8e44ad",
    strokeWidth: 10,
    opacity: 0.7
});

Можно также получить значение конкретного атрибута:

var fillColor = circle.attr("fill"); // "#e74c3c"

attr поддерживает динамическое обновление, позволяя применять новые значения в любое время.

Трансформации через обертку

Snap.svg предоставляет мощные хелперы для трансформаций:

  • Перемещение (translate): element.transform("t100,50") сдвигает элемент на 100px по X и 50px по Y.
  • Поворот (rotate): element.transform("r45,150,150") поворачивает элемент на 45° относительно точки (150,150).
  • Масштабирование (scale): element.transform("s2,2,150,150") увеличивает элемент в 2 раза относительно указанной точки.

Комбинации трансформаций объединяются строкой с пробелами:

circle.transform("t50,50 r30 s1.5,1.5");

Для удобства можно использовать методы-хелперы:

circle.translate(50, 50);
circle.rotate(30, 150, 150);
circle.scale(1.5, 1.5, 150, 150);

Эти методы обновляют текущую трансформацию без перезаписи других.

Работа с группами (<g>)

Обертки можно объединять в группы для совместного управления элементами:

var g = s.group(circle, s.rect(100, 100, 200, 150));
g.attr({opacity: 0.5});
g.transform("t50,50 r15");

Группа наследует все методы обертки:

  • Можно одновременно изменять атрибуты всех элементов.
  • Применять трансформации ко всей группе.
  • Добавлять/удалять элементы динамически.

Хелперы для анимации

Snap.svg предоставляет встроенные хелперы для анимаций через метод animate:

circle.animate({cx: 400, fill: "#2ecc71"}, 1000, mina.bounce);

Параметры метода:

  • Объект атрибутов: новые значения свойств.
  • Длительность: в миллисекундах.
  • Функция интерполяции (easing): mina.linear, mina.bounce, mina.elastic.
  • Callback: выполняется после завершения анимации.

Работа с текстом и сложными элементами

Обертки также поддерживают текстовые элементы:

var text = s.text(200, 200, "Snap.svg");
text.attr({
    fontSize: 40,
    fill: "#f39c12",
    textAnchor: "middle"
});

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

Полезные хелперы

  • element.remove() — удаляет элемент из DOM.
  • element.clone() — создает копию элемента с теми же атрибутами.
  • element.appendTo(group) / element.prependTo(group) — добавляет элемент в группу.
  • element.getBBox() — возвращает bounding box элемента: {x, y, width, height}.
  • Snap.path.toCubic(path) — преобразует путь в кривые Безье для упрощения анимации.

Цепочка методов

Обертки поддерживают цепочку вызовов:

circle.attr({fill: "#1abc9c"})
      .transform("t100,0")
      .animate({r: 360}, 2000, mina.linear);

Такой подход повышает читаемость кода и позволяет комбинировать операции без промежуточных переменных.

Обертки и события

События работают непосредственно с обертками:

circle.click(function() {
    this.attr({fill: "#e67e22"});
});

circle.hover(
    function() { this.attr({strokeWidth: 10}); },
    function() { this.attr({strokeWidth: 5}); }
);

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

Заключение возможностей

Обертки в Snap.svg — это не просто объект-обертка для элемента SVG, а полноценный инструмент, объединяющий управление атрибутами, трансформациями, анимациями и событиями. Хелперы делают код лаконичным, позволяют создавать сложные динамические визуализации, группировать элементы и работать с ними как с единым объектом, что делает Snap.svg удобным и мощным инструментом для веб-графики.

Оглавление