Определение порядка отрисовки

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

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

Базовый принцип порядка в SVG DOM

SVG рендерится строго сверху вниз по дереву документа. Каждый новый элемент перекрывает предыдущий, если они пересекаются в пространстве.

Ключевые особенности:

  • элементы, объявленные раньше, отрисовываются первыми;
  • последующие элементы накладываются поверх предыдущих;
  • вложенность внутри <g> влияет только на группировку, но не отменяет порядок внутри группы;
  • CSS не управляет порядком наложения в стандартном SVG-потоке.

Простейший пример:

<svg width="200" height="200">
  <circle cx="50" cy="50" r="40" fill="red" />
  <circle cx="80" cy="80" r="40" fill="blue" />
</svg>

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

Как Vivus использует порядок DOM

Vivus строит анимацию на основе последовательного обхода SVG-элементов, способных быть анимированными через stroke-dasharray.

При инициализации происходит:

  1. Поиск всех путей (<path>, а также поддерживаемых форм)
  2. Фильтрация элементов, которые могут быть анимированы
  3. Формирование внутреннего массива элементов в порядке их появления в DOM
  4. Применение анимации согласно выбранной стратегии

Таким образом, порядок в исходном SVG становится основой всей временной структуры анимации.

Основные типы порядка анимации Vivus

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

Последовательная анимация (oneByOne)

Каждый путь анимируется строго после завершения предыдущего.

Логика:

  • берётся первый элемент в DOM
  • запускается анимация до завершения
  • затем следующий элемент

Это создаёт эффект рисования контура по частям.

Синхронная анимация (sync)

Все элементы начинают анимацию одновременно, но с разной длительностью в зависимости от длины пути.

Особенности:

  • порядок DOM влияет только на визуальное наложение, но не на старт анимации
  • элементы могут завершаться в разное время

Отложенная последовательность (delayed)

Каждый элемент начинает анимацию с задержкой, зависящей от его позиции в DOM.

Формируется временная шкала:

  • элемент 1: t = 0
  • элемент 2: t = Δ
  • элемент 3: t = 2Δ

Такой подход создаёт равномерное «протекание» отрисовки по структуре SVG.

Влияние групп <g> на порядок

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

Рассмотрим пример:

<svg>
  <g>
    <path d="..." />
    <path d="..." />
  </g>
  <path d="..." />
</svg>

Порядок анимации будет:

  1. первый path внутри группы
  2. второй path внутри группы
  3. внешний path

Vivus не делает приоритизации по группам, он разворачивает структуру в плоский список.

Иерархия порядка и визуальное перекрытие

Важно различать:

  • порядок анимации (Vivus)
  • порядок отрисовки (SVG renderer)

Эти два процесса связаны, но не идентичны.

Даже если элемент анимируется позже, он может визуально находиться ниже или выше в зависимости от DOM-позиции.

Пример:

  • path A анимируется первым
  • path B анимируется вторым
  • но B может перекрывать A из-за порядка в документе

Влияние структуры <defs> и скрытых элементов

Элементы внутри <defs> не участвуют в визуальной отрисовке и игнорируются Vivus при построении последовательности.

Также исключаются:

  • <clipPath>
  • <mask>
  • невидимые элементы без stroke
  • элементы с display: none

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

Алгоритм формирования очереди отрисовки

Внутренний процесс можно описать следующим образом:

  1. Обход DOM дерева SVG
  2. Проверка допустимости элемента
  3. Преобразование сложных форм в набор path (если необходимо)
  4. Добавление элемента в массив очереди
  5. Назначение индекса позиции
  6. Расчёт параметров анимации (длина пути, delay, duration)

Результирующая очередь становится основой таймлайна анимации.

Влияние оптимизации SVG на порядок

Оптимизаторы SVG могут менять структуру документа:

  • объединять пути
  • изменять порядок узлов
  • удалять группы
  • переупорядочивать элементы ради минимизации кода

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

Например:

До оптимизации:

<path id="1" />
<path id="2" />
<path id="3" />

После оптимизации:

<path id="2" />
<path id="1" />
<path id="3" />

Анимация изменит визуальную последовательность без изменения логики кода Vivus.

Переопределение порядка через структуру SVG

Контроль порядка осуществляется исключительно через изменение DOM-структуры.

Основные методы управления:

  • перестановка <path> в коде SVG
  • разбиение сложных фигур на отдельные пути
  • использование групп <g> для логической сегментации
  • ручная оптимизация порядка узлов перед инициализацией Vivus

Vivus не предоставляет API для ручной сортировки элементов, так как опирается на DOM как на источник истины.

Особенности взаимодействия с вложенными путями

Некоторые SVG-редакторы создают сложные структуры:

  • <path> внутри <symbol>
  • повторное использование через <use>

Vivus обрабатывает только реальные экземпляры в DOM, а не ссылки, поэтому:

  • <symbol> игнорируется напрямую
  • <use> может быть развернут или пропущен в зависимости от реализации браузера

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

Тайминг и порядок как единая система

Порядок отрисовки тесно связан с временными параметрами:

  • duration определяет длительность одного элемента
  • delay задаёт смещение между элементами
  • easing влияет на характер изменения скорости

В режимах oneByOne и delayed порядок DOM становится осью времени, превращая структуру SVG в временную диаграмму.

Ошибки проектирования порядка

Типичные проблемы возникают при неправильной организации SVG:

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

Это приводит к визуальным разрывам анимации и несогласованности движения.

Принцип предсказуемости

Предсказуемость Vivus полностью определяется стабильностью DOM:

  • неизменный порядок элементов = стабильная анимация
  • изменённый порядок = новая последовательность рисования
  • динамическая генерация SVG = непредсказуемый результат без фиксации структуры

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

Оглавление