Вставка элементов

Работа с библиотекой Snap.svg начинается с создания SVG-контейнера, в который будут добавляться графические элементы. Контейнер может быть создан как из уже существующего <svg> в документе, так и динамически.

var s = Snap(600, 400);

В этом случае создаётся новый SVG-элемент шириной 600 и высотой 400 пикселей, автоматически добавляемый в DOM.

Альтернативный вариант — привязка к существующему элементу:

var s = Snap("#svg");

Здесь используется селектор, аналогичный CSS.

Добавление базовых примитивов

Snap.svg предоставляет удобные методы для создания основных SVG-элементов.

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

var rect = s.rect(50, 50, 200, 100);

Параметры:

  • x, y — координаты верхнего левого угла
  • width, height — размеры

Добавление скругления углов:

var rect = s.rect(50, 50, 200, 100, 10, 10);

Круг

var circle = s.circle(150, 150, 50);

Параметры:

  • cx, cy — центр круга
  • r — радиус

Эллипс

var ellipse = s.ellipse(200, 100, 80, 40);

Параметры:

  • cx, cy — центр
  • rx, ry — радиусы по осям

Линия

var line = s.line(0, 0, 300, 200);

Параметры:

  • начальная и конечная точки

Многоугольник и ломаная

var polygon = s.polygon([50,10, 90,90, 10,90]);
var polyline = s.polyline([10,10, 50,50, 90,10]);

Массив задаёт последовательность координат точек.

Работа с путями (path)

Пути — наиболее универсальный инструмент SVG.

var path = s.path("M10 10 L100 100");

Основные команды:

  • M — перемещение
  • L — линия
  • C — кубическая кривая Безье
  • Z — замыкание пути

Пример сложного пути:

var path = s.path("M50 50 C 70 10, 120 10, 140 50");

Добавление текста

var text = s.text(100, 50, "Snap.svg");

Можно передавать массив строк:

var text = s.text(100, 50, ["Первая строка", "Вторая строка"]);

Вставка изображений

var img = s.image("image.png", 0, 0, 200, 200);

Параметры:

  • путь к изображению
  • координаты
  • размеры

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

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

var group = s.group(rect, circle);

Также можно создавать пустую группу:

var group = s.group();
group.add(rect, circle);

Использование атрибутов

Каждый элемент можно настраивать через метод attr.

rect.attr({
    fill: "#3498db",
    stroke: "#2c3e50",
    strokeWidth: 5
});

Часто используемые атрибуты:

  • fill — цвет заливки
  • stroke — цвет обводки
  • strokeWidth — толщина линии
  • opacity — прозрачность

Вставка через строки SVG

Snap.svg поддерживает парсинг строк SVG.

var fragment = Snap.parse('<circle cx="50" cy="50" r="40" fill="red"/>');
s.append(fragment);

Это удобно при работе с заранее подготовленной разметкой.

Клонирование элементов

var copy = rect.clone();
copy.attr({ x: 300 });

Клон полностью повторяет исходный элемент, включая атрибуты.

Удаление элементов

rect.remove();

Удаляет элемент из DOM.

Порядок отображения (z-index)

SVG не поддерживает z-index, порядок определяется последовательностью в DOM.

Методы управления:

rect.toFront();
rect.toBack();
rect.insertAfter(circle);
rect.insertBefore(circle);

Использование фрагментов (fragment)

Фрагменты позволяют временно хранить элементы перед добавлением:

var frag = Snap.fragment(
    '<rect x="10" y="10" width="50" height="50"/>',
    '<circle cx="100" cy="100" r="30"/>'
);

s.append(frag);

Вложенные SVG

Возможна вставка одного SVG внутрь другого:

var nested = s.svg(100, 100, 200, 200);
nested.circle(50, 50, 40);

Маски и клип-пути

Маска

var mask = s.circle(100, 100, 50);
var rect = s.rect(0, 0, 200, 200).attr({
    mask: mask
});

Клип-путь

var clip = s.circle(100, 100, 50);
rect.attr({
    clipPath: clip
});

Символы и повторное использование

var symbol = s.symbol();
symbol.add(rect);

var use = symbol.use().attr({ x: 200, y: 0 });

Позволяет эффективно повторно использовать элементы.

Работа с внешними SVG

Загрузка внешнего файла:

Snap.load("file.svg", function(data) {
    s.append(data);
});

Позволяет интегрировать сложные SVG-документы.

Инкапсуляция вставки

Часто создание элементов оформляется в функции:

function createButton(s, x, y, text) {
    var group = s.group();
    
    var rect = s.rect(x, y, 120, 40, 5).attr({
        fill: "#2ecc71"
    });
    
    var label = s.text(x + 20, y + 25, text).attr({
        fill: "#fff"
    });
    
    group.add(rect, label);
    
    return group;
}

Производительность при вставке

  • минимизация количества операций append
  • использование fragment для пакетной вставки
  • избегание частых изменений DOM

Пример оптимизации:

var frag = Snap.fragment();

for (var i = 0; i < 100; i++) {
    frag.add(s.circle(i * 10, 50, 5));
}

s.append(frag);

Доступ к элементам

Каждый созданный элемент — объект Snap, с которым можно работать:

var el = s.select("circle");
var all = s.selectAll("rect");

Идентификация элементов

rect.attr({ id: "myRect" });

var el = Snap("#myRect");

Вставка HTML внутрь SVG (foreignObject)

var foreign = s.el("foreignObject", {
    x: 10,
    y: 10,
    width: 200,
    height: 100
});

var div = document.createElement("div");
div.innerHTML = "HTML внутри SVG";

foreign.node.appendChild(div);
s.append(foreign);

Особенности вставки

  • координатная система начинается в левом верхнем углу
  • все элементы являются частью одного DOM-дерева
  • порядок создания влияет на визуальное наложение
  • большинство методов возвращают объект элемента для цепочек вызовов

Цепочки вызовов

s.circle(50, 50, 40)
 .attr({ fill: "red" })
 .transform("translate(10,10)");

Позволяет компактно описывать вставку и настройку элементов.

Комбинирование элементов

Создание сложных объектов из простых:

var face = s.group();

var head = s.circle(100, 100, 50);
var eye1 = s.circle(80, 90, 5);
var eye2 = s.circle(120, 90, 5);
var mouth = s.path("M80 120 Q100 140 120 120");

face.add(head, eye1, eye2, mouth);

Итеративная генерация элементов

for (var i = 0; i < 10; i++) {
    s.rect(i * 30, 10, 20, 20).attr({
        fill: "#000"
    });
}

Вставка с трансформациями

var rect = s.rect(0, 0, 100, 50);
rect.transform("translate(100,100) rotate(45)");

Контроль структуры документа

Snap.svg напрямую работает с DOM, поэтому структура SVG полностью контролируема:

  • вложенность
  • порядок
  • группировка

Это делает вставку элементов не просто добавлением графики, а полноценным управлением документом.

Оглавление