Визуальное тестирование

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

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

Параметры — ширина и высота холста в пикселях. Можно также использовать существующий SVG-элемент из DOM:

var s = Snap("#mySvg"); // подключение к <svg id="mySvg"></svg>

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

Основные графические элементы

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

var rect = s.rect(50, 50, 200, 100); // x, y, width, height
rect.attr({
    fill: "#3498db",
    stroke: "#2c3e50",
    strokeWidth: 4
});

var circle = s.circle(300, 150, 75); // cx, cy, radius
circle.attr({
    fill: "red",
    stroke: "black",
    strokeWidth: 2
});

Линии и многоугольники

var line = s.line(100, 100, 400, 400);
line.attr({
    stroke: "green",
    strokeWidth: 3
});

var polygon = s.polygon([50,50, 150,50, 100,150]);
polygon.attr({
    fill: "orange",
    stroke: "purple",
    strokeWidth: 2
});

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

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

Пути (paths) дают возможность создавать сложные формы с использованием синтаксиса SVG.

var path = s.path("M150 0 L75 200 L225 200 Z"); // треугольник
path.attr({
    fill: "#f39c12",
    stroke: "#e74c3c",
    strokeWidth: 3
});

Ключевые команды:

M x y — переместиться в точку (x, y)
L x y — линия до точки (x, y)
C x1 y1 x2 y2 x y — кубическая кривая Безье
Q x1 y1 x y — квадратичная кривая
Z — закрыть путь

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

Snap.svg предоставляет методы для трансформации объектов: масштабирование, вращение, смещение.

circle.transform("t100,50r45s1.5,1.5"); 
// t — translate, r — rotate, s — scale

Анимация атрибутов

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

Первый параметр — объект конечных атрибутов
Второй — длительность анимации в миллисекундах
Третий — функция интерполяции (mina.linear, mina.easein, mina.elastic и др.)

Анимация пути

path.animate({ d: "M150 0 L200 200 L100 200 Z" }, 1500, mina.easeinout);

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

Для упрощения управления несколькими элементами используется группа:

var g = s.group(rect, circle, line);
g.attr({ opacity: 0.8 });
g.transform("t50,50");

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

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

Snap.svg поддерживает создание текстовых элементов с возможностью кастомизации шрифта, размера, цвета и выравнивания.

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

Фильтры и эффекты

Snap.svg позволяет применять SVG-фильтры, включая размытие, тень, цветовые эффекты.

var blur = s.filter(Snap.filter.blur(5, 5));
circle.attr({ filter: blur });

Для сложных эффектов можно комбинировать несколько фильтров через add():

var shadow = s.filter(Snap.filter.shadow(2, 2, 4, "#000", 0.5));
circle.attr({ filter: shadow });

Интерактивность и события

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

rect.click(function() {
    this.attr({ fill: "#e74c3c" });
});

circle.hover(
    function() { this.attr({ stroke: "#2980b9", strokeWidth: 6 }); },
    function() { this.attr({ stroke: "black", strokeWidth: 2 }); }
);

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

Инспекция и отладка

Для визуального тестирования важно проверять положение, размер и атрибуты элементов:

console.log(rect.getBBox()); // возвращает объект с координатами и размерами
console.log(circle.attr("fill")); // вывод текущего цвета заливки

Snap.svg предоставляет методы getBBox(), getTotalLength() и getPointAtLength() для анализа объектов и путей, что особенно полезно при тестировании анимаций и сложной геометрии.

Интеграция с CSS и DOM

Элементы Snap.svg можно стилизовать через CSS и взаимодействовать с HTML:

rect.node.classList.add("highlight");

Также доступен прямой доступ к DOM-узлу через свойство node, что облегчает инспекцию и тестирование в браузере.