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

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

Vivus принимает в качестве первого аргумента:

  • строковый селектор (id)
  • сам DOM-элемент
  • иногда — контейнер, содержащий SVG

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

new Vivus('my-svg', {
  type: 'delayed',
  duration: 200
});

В данном случае 'my-svg' — это значение атрибута id SVG-элемента:

<svg id="my-svg" viewBox="0 0 200 200">
  <path d="..." />
</svg>

Vivus автоматически находит элемент через document.getElementById.

Использование DOM-элементов напрямую

Вместо строкового селектора можно передать уже найденный элемент:

const svgElement = document.querySelector('#my-svg');

new Vivus(svgElement, {
  type: 'sync'
});

Такой подход удобен при:

  • сложной логике выбора элементов
  • работе с несколькими SVG
  • динамической генерации интерфейса

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

Vivus не поддерживает множественную инициализацию через один вызов. Для нескольких SVG требуется создавать отдельный экземпляр для каждого:

const svgs = document.querySelectorAll('.icon');

svgs.forEach(svg => {
  new Vivus(svg, {
    duration: 150
  });
});

Важно: querySelectorAll возвращает NodeList, а не отдельный элемент — Vivus не сможет работать с коллекцией напрямую.

Вложенные SVG и контейнеры

Иногда SVG размещается внутри контейнера:

<div id="container">
  <svg viewBox="0 0 100 100">
    <path d="..." />
  </svg>
</div>

Передача контейнера:

new Vivus('container', {
  file: 'image.svg'
});

Здесь поведение зависит от параметра file:

  • если указан file, Vivus загрузит SVG внутрь контейнера
  • если нет — ожидается, что SVG уже находится внутри

Загрузка SVG через параметр file

Vivus умеет подгружать SVG-файлы:

new Vivus('container', {
  file: 'path/to/image.svg'
});

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

  • контейнер должен существовать в DOM
  • SVG загружается асинхронно
  • после загрузки Vivus автоматически запускает анимацию

При этом селектор указывает именно на контейнер, а не на SVG.

Использование сложных селекторов

Vivus напрямую не поддерживает CSS-селекторы (например .class или div > svg). Передача строки интерпретируется строго как id.

Неверно:

new Vivus('.icon'); // не сработает

Правильно:

const element = document.querySelector('.icon');
new Vivus(element);

Работа с динамически добавленными элементами

Если SVG добавляется после загрузки страницы (например, через AJAX или JS), необходимо:

  1. дождаться его появления в DOM
  2. только после этого инициализировать Vivus

Пример:

setTimeout(() => {
  const svg = document.querySelector('#dynamic-svg');

  new Vivus(svg, {
    duration: 200
  });
}, 1000);

Или через MutationObserver:

const observer = new MutationObserver(() => {
  const svg = document.querySelector('#dynamic-svg');

  if (svg) {
    new Vivus(svg);
    observer.disconnect();
  }
});

observer.observe(document.body, {
  childList: true,
  subtree: true
});

Проверка существования элемента

Vivus не всегда явно сообщает об ошибках селектора. При передаче несуществующего элемента возможны:

  • отсутствие анимации
  • ошибки в консоли

Рекомендуется проверка:

const el = document.getElementById('my-svg');

if (el) {
  new Vivus(el);
}

Работа с Shadow DOM

Vivus не ищет элементы внутри Shadow DOM автоматически. Если SVG находится внутри теневого дерева:

const shadowRoot = element.shadowRoot;
const svg = shadowRoot.querySelector('svg');

new Vivus(svg);

Управление областью анимации

Vivus анимирует все path внутри SVG. Однако можно ограничить область:

<svg id="icon">
  <g id="animate-me">
    <path d="..." />
  </g>
  <g>
    <path d="..." />
  </g>
</svg>
const group = document.querySelector('#animate-me');

new Vivus(group);

Таким образом анимация применяется только к выбранной группе.

Особенности выбора элементов внутри SVG

SVG — это XML-документ, встроенный в HTML. Поэтому:

  • querySelector работает аналогично
  • можно выбирать path, g, circle и другие элементы

Пример:

const paths = document.querySelectorAll('#my-svg path');

paths.forEach(path => {
  console.log(path);
});

Vivus автоматически обрабатывает все path, но их можно подготовить заранее:

  • задать порядок
  • изменить стили
  • исключить ненужные элементы

Исключение элементов из анимации

Vivus поддерживает атрибут:

<path d="..." data-ignore="true" />

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

Порядок обхода элементов

Порядок анимации зависит от порядка элементов в DOM:

<svg>
  <path id="first" />
  <path id="second" />
</svg>

Vivus сначала анимирует first, затем second.

Изменить порядок можно:

  • вручную в SVG
  • через Jav * aScript:
const svg = document.querySelector('#my-svg');
const paths = svg.querySelectorAll('path');

svg.appendChild(paths[0]); // перемещение в конец

Повторная инициализация

При повторном использовании одного и того же элемента важно:

  • не создавать несколько экземпляров Vivus для одного SVG
  • либо предварительно очищать состояние

Неправильно:

new Vivus('my-svg');
new Vivus('my-svg'); // конфликт

Правильно — использовать один экземпляр:

const anim = new Vivus('my-svg');

anim.reset().play();

Работа с ID и уникальностью

Каждый SVG должен иметь уникальный id, если используется строковый селектор:

<svg id="icon1"></svg>
<svg id="icon2"></svg>

Повторяющиеся id приведут к:

  • выбору только первого элемента
  • непредсказуемому поведению

Итоговая схема выбора

Подход Когда использовать
new Vivus('id') простой случай
new Vivus(element) динамика, сложная логика
querySelector + Vivus классы, вложенность
контейнер + file загрузка SVG извне
цикл по NodeList множественные SVG

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

Оглавление