Вставка загруженного SVG

Snap.svg предоставляет удобный способ работы с SVG-графикой через объект Snap. Для начала создается холст с помощью функции Snap(width, height), где width и height задают размеры области отображения. После этого загруженный SVG-файл можно импортировать через метод Snap.load(url, callback).

var s = Snap(800, 600);

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

В этом примере fragment содержит загруженный SVG как объект DocumentFragment, который можно вставлять в холст с помощью append(). Этот подход позволяет динамически добавлять графику без прямой вставки HTML-кода.

Работа с элементами загруженного SVG

После загрузки SVG через Snap.load каждый элемент документа становится доступным для манипуляции через методы Snap.svg. Для получения конкретного элемента используется метод select или selectAll:

Snap.load("image.svg", function(fragment) {
    s.append(fragment);
    var circle = fragment.select("circle");
    circle.attr({
        fill: "red",
        stroke: "black",
        strokeWidth: 2
    });
});
  • select(selector) — возвращает первый элемент, соответствующий CSS-селектору.
  • selectAll(selector) — возвращает коллекцию элементов, удовлетворяющих селектору.

Эти методы позволяют изменять свойства, применять трансформации и анимацию.

Изменение атрибутов и стилей

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

circle.attr({
    cx: 150,
    cy: 150,
    r: 50,
    fill: "#00ff00",
    stroke: "#000",
    strokeWidth: 3
});

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

Трансформации элементов

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

circle.transform("translate(100,50) rotate(45) scale(1.5)");
  • translate(x, y) — смещение элемента по координатам.
  • rotate(angle, cx, cy) — поворот вокруг точки (cx, cy); если точки не указаны, используется центр объекта.
  • scale(sx, sy) — масштабирование по осям X и Y; при отсутствии sy используется sx.

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

Анимация загруженных SVG

Snap.svg предоставляет мощные средства для анимации элементов через метод animate(attrs, duration, easing, callback):

circle.animate({
    cx: 300,
    cy: 200,
    fill: "#ff0000"
}, 1000, mina.bounce);
  • attrs — объект атрибутов, которые нужно анимировать.
  • duration — продолжительность анимации в миллисекундах.
  • easing — функция сглаживания (например, mina.linear, mina.easeinout, mina.bounce).
  • callback — функция, вызываемая по завершении анимации.

Анимации можно комбинировать, создавая последовательные или параллельные эффекты.

Доступ к вложенным элементам и группам

SVG-файлы часто содержат группы (<g>), которые также могут быть загружены и изменены:

Snap.load("diagram.svg", function(fragment) {
    s.append(fragment);
    var group = fragment.select("g#icons");
    group.selectAll("path").forEach(function(path) {
        path.attr({ stroke: "#333", strokeWidth: 2 });
    });
});

Метод selectAll в сочетании с forEach позволяет применять стили или трансформации ко всем вложенным элементам группы одновременно.

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

Элементы загруженного SVG поддерживают обработку событий, аналогично обычным HTML-элементам:

circle.click(function() {
    this.animate({ r: 80 }, 500, mina.elastic);
});

Поддерживаются события click, mouseover, mouseout, mousedown и др. Это открывает возможности для интерактивных визуализаций и интерфейсов.

Кэширование и повторное использование SVG

Загруженный SVG-файл можно сохранять в переменную для повторного использования без повторной загрузки:

Snap.load("icon.svg", function(fragment) {
    var iconTemplate = fragment;
    function addIcon(x, y) {
        var icon = iconTemplate.clone();
        icon.transform(`translate(${x}, ${y})`);
        s.append(icon);
    }
    addIcon(50, 50);
    addIcon(200, 100);
});

Метод clone() создает независимую копию элемента или группы, что позволяет использовать один шаблон SVG многократно на холсте.

Интеграция с внешними данными

Загруженные SVG могут быть динамически изменены на основе данных из API или массива объектов. Например, изменение цвета кружков в зависимости от значений:

var data = [10, 20, 30, 40];
Snap.load("circles.svg", function(fragment) {
    s.append(fragment);
    var circles = fragment.selectAll("circle");
    circles.forEach(function(circle, i) {
        var value = data[i] || 0;
        circle.attr({ r: value * 2, fill: `rgb(${value*5},0,${255-value*5})` });
    });
});

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

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

Оглавление