Конструктор Snap

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

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

Можно также привязать холст к существующему элементу DOM:

var s = Snap("#mySvg"); // привязывает Snap к элементу <svg id="mySvg"></svg>

После создания холста на нём можно размещать любые графические объекты: линии, прямоугольники, круги, пути и текст.

Создание базовых элементов

Прямоугольник

var rect = s.rect(50, 50, 200, 100); // x, y, ширина, высота
rect.attr({
    fill: "#3498db",
    stroke: "#2c3e50",
    strokeWidth: 5
});

Круг

var circle = s.circle(400, 200, 80); // cx, cy, радиус
circle.attr({
    fill: "red",
    stroke: "black",
    strokeWidth: 3
});

Линия

var line = s.line(100, 300, 700, 300); // x1, y1, x2, y2
line.attr({
    stroke: "#27ae60",
    strokeWidth: 4
});

Эллипс

var ellipse = s.ellipse(600, 400, 100, 50); // cx, cy, rx, ry
ellipse.attr({
    fill: "#f1c40f",
    stroke: "#e67e22",
    strokeWidth: 2
});

Работа с путями

Snap.svg предоставляет мощный инструмент для создания сложных форм с помощью путей (path). Путь задаётся строкой, содержащей команды SVG.

var path = s.path("M150 0 L75 200 L225 200 Z"); // M – move, L – line, Z – закрыть
path.attr({
    fill: "#9b59b6",
    stroke: "#8e44ad",
    strokeWidth: 4
});

Для более сложных кривых используется команда C (кубическая кривая Безье):

var bezier = s.path("M100 250 C 150 100, 350 100, 400 250");
bezier.attr({
    fill: "none",
    stroke: "#e74c3c",
    strokeWidth: 5
});

Группировка элементов

Группы позволяют объединять элементы и управлять ими как единым объектом. Создание группы осуществляется методом group():

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

group.attr({
    fill: "#1abc9c",
    stroke: "#16a085",
    strokeWidth: 2
});

// Перемещение всей группы
group.transform('t200,150'); // t — translate

Группы поддерживают трансформации (translate, rotate, scale) и наследуют стили элементов, если задано на уровне группы.

Трансформации и анимации

Трансформации

Snap.svg позволяет применять комплексные трансформации:

circle.transform("t100,50 r45 s1.5,1.5"); 
// t — перенос, r — поворот, s — масштаб

Трансформации можно комбинировать и анимировать плавно.

Анимации

Метод animate() позволяет изменять атрибуты элемента с заданной длительностью и функцией интерполяции:

rect.animate({x: 300, y: 200, fill: "#e67e22"}, 1000, mina.easeinout);

Snap.svg использует библиотеку анимаций mina, которая обеспечивает линейные, ease-in, ease-out и другие типы интерполяций.

Работа с текстом

Создание текстовых элементов осуществляется через text():

var text = s.text(100, 100, "Snap.svg Example");
text.attr({
    fontSize: 24,
    fontFamily: "Arial",
    fill: "#34495e"
});

Текст поддерживает базовые стили CSS и может быть анимирован или преобразован вместе с графическими элементами.

Эффекты и фильтры

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

var filter = s.filter(Snap.filter.shadow(5, 5, 5, "#000"));
rect.attr({filter: filter});

Можно комбинировать несколько фильтров для достижения сложных визуальных эффектов.

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

Snap.svg поддерживает стандартные события DOM:

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

rect.hover(
    function() { this.attr({stroke: "#c0392b"}); },
    function() { this.attr({stroke: "#2c3e50"}); }
);

Поддерживаются события click, mouseover, mouseout, mousedown, mouseup и другие. Это позволяет создавать интерактивные графические интерфейсы.

Импорт и работа с SVG-файлами

Snap.svg предоставляет метод Snap.load() для загрузки внешних SVG:

Snap.load("image.svg", function(fragment) {
    s.append(fragment);
});

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

Составные и сложные объекты

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

  • Масштабируемость и трансформации без потери качества.
  • Управление слоями и z-index через порядок добавления элементов.
  • Совместимость с современными браузерами и поддержкой стандартного SVG API.

Это делает библиотеку идеальным инструментом для интерактивной графики, визуализации данных и создания динамических интерфейсов на основе векторной графики.

Оглавление