Append и prepend

Работа с SVG-документом редко ограничивается созданием отдельных элементов — ключевую роль играет управление их структурой. В Snap.svg для этого предусмотрены методы append и prepend, позволяющие динамически изменять иерархию элементов и управлять порядком их отображения.

Общая концепция

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

  • элементы, добавленные позже, перекрывают предыдущие;
  • порядок в DOM определяет порядок рендеринга.

Методы:

  • append() — добавляет элемент в конец списка дочерних элементов;
  • prepend() — добавляет элемент в начало списка дочерних элементов.

Метод append

Синтаксис

parent.append(child);

Особенности

  • добавляет элемент в конец списка дочерних элементов;
  • если элемент уже существует в DOM, он будет перемещён, а не скопирован;
  • влияет на визуальный слой — добавленный элемент окажется поверх других.

Пример использования

var paper = Snap(400, 400);

var rect = paper.rect(50, 50, 200, 100).attr({
    fill: "blue"
});

var circle = paper.circle(150, 100, 50).attr({
    fill: "red"
});

paper.append(rect);
paper.append(circle);

Разбор

  • сначала добавляется прямоугольник;
  • затем круг;
  • круг окажется поверх прямоугольника, так как был добавлен позже.

Перемещение существующего элемента

var group = paper.group();

group.append(rect);
group.append(circle);
  • элементы rect и circle перемещаются внутрь группы;
  • они исчезают из прежнего положения в DOM;
  • порядок внутри группы сохраняется.

Метод prepend

Синтаксис

parent.prepend(child);

Особенности

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

Пример использования

var paper = Snap(400, 400);

var rect = paper.rect(50, 50, 200, 100).attr({
    fill: "blue"
});

var circle = paper.circle(150, 100, 50).attr({
    fill: "red"
});

paper.append(rect);
paper.prepend(circle);

Разбор

  • прямоугольник добавляется первым;
  • круг добавляется через prepend, поэтому вставляется перед прямоугольником;
  • визуально круг окажется под прямоугольником, несмотря на то, что создан позже.

Работа с группами

Группы (group) — ключевой инструмент структурирования SVG. Методы append и prepend активно используются для управления их содержимым.

Пример

var paper = Snap(400, 400);

var group = paper.group();

var rect = paper.rect(0, 0, 100, 100).attr({ fill: "green" });
var circle = paper.circle(50, 50, 40).attr({ fill: "yellow" });

group.append(rect);
group.prepend(circle);

Поведение

  • circle окажется первым элементом в группе;
  • rect — вторым;
  • визуально rect перекроет circle.

Взаимодействие с порядком слоёв

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

Эквиваленты

Задача Метод
Переместить наверх append
Переместить вниз prepend

Пример: имитация “поднять элемент”

function bringToFront(el) {
    el.appendTo(el.parent());
}

Или напрямую:

el.parent().append(el);

Пример: отправить назад

el.parent().prepend(el);

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

Методы принимают один элемент за вызов. Для добавления нескольких элементов используется последовательный вызов:

group.append(rect);
group.append(circle);
group.append(text);

Влияние на события и анимации

Перемещение элемента через append или prepend:

  • не сбрасывает обработчики событий;
  • не влияет на анимации;
  • сохраняет все атрибуты и состояния.

Это важно при динамическом изменении структуры интерфейса.

Частые ошибки

1. Ожидание копирования вместо перемещения

group.append(rect);
  • rect не копируется;
  • он перемещается из текущего места в группу.

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

var clone = rect.clone();
group.append(clone);

2. Непонимание порядка отображения

paper.append(rect);
paper.prepend(circle);
  • круг окажется под прямоугольником, несмотря на порядок вызова.

3. Добавление без родителя

Если элемент не добавлен ни в один контейнер:

var rect = Snap().rect(0, 0, 100, 100);

Он не будет отображаться, пока не добавлен через append или prepend.

Комбинирование с другими методами

Методы append и prepend часто используются вместе с:

  • before() — вставка перед конкретным элементом;
  • after() — вставка после элемента;
  • insertBefore() / insertAfter() — более точечное управление.

Практический сценарий: управление слоями

var background = paper.rect(0, 0, 400, 400).attr({ fill: "#eee" });
var player = paper.circle(200, 200, 20).attr({ fill: "blue" });
var ui = paper.text(10, 20, "Score: 0");

paper.append(background);
paper.append(player);
paper.append(ui);

Перемещение UI поверх всего:

paper.append(ui);

Отправка фона назад:

paper.prepend(background);

Итоговая логика работы

  • append — добавляет элемент в конец → элемент сверху;
  • prepend — добавляет в начало → элемент снизу;
  • оба метода перемещают, а не копируют;
  • порядок в DOM = порядок отрисовки;
  • активно применяются при работе с группами и динамическими интерфейсами.
Оглавление