Популярные плагины

Библиотека SVG.js изначально предоставляет базовые возможности работы с SVG-элементами, однако для создания сложных анимаций часто используют плагины. Один из самых известных — это SVG.js Animations (svg.animation.js), который расширяет стандартный функционал анимации SVG.js. Он позволяет:

  • анимировать атрибуты элементов, такие как x, y, width, height, fill, stroke;
  • создавать кастомные кривые изменения через функцию ease;
  • строить последовательные или параллельные анимации через методы .after() и .during().

Пример анимации круга:

const draw = SVG().addTo('body').size(300, 300);
const circle = draw.circle(100).fill('red').move(50, 50);

circle.animate(2000, '<>')
      .move(150, 150)
      .fill('blue');

Здесь '<>' — это функция easing, которая задаёт плавность движения.

SVG.draggable

Для интерактивного перемещения элементов применяют плагин SVG.draggable. Он добавляет элементу возможность перетаскивания мышью и поддерживает различные события: dragstart, dragmove, dragend.

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

const rect = draw.rect(100, 100).fill('green').move(50, 50);
rect.draggable().on('dragmove', (event) => {
  console.log(`Новая позиция: x=${event.detail.box.x}, y=${event.detail.box.y}`);
});

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

SVG.select.js

Плагин SVG.select.js расширяет возможности работы с множественными элементами SVG. Он позволяет:

  • выделять один или несколько объектов;
  • перемещать, масштабировать и вращать выделенные объекты как группу;
  • применять трансформации через визуальные маркеры.

Пример группового выделения и трансформации:

const rect1 = draw.rect(50, 50).fill('orange').move(10, 10);
const rect2 = draw.rect(50, 50).fill('purple').move(70, 10);

const selection = draw.select().add(rect1).add(rect2);
selection.transform({ rotate: 45, cx: 35, cy: 35 });

Плагин упрощает создание интерактивных редакторов SVG прямо в браузере.

SVG.filter.js

Для применения фильтров и эффектов к элементам существует плагин SVG.filter.js. С его помощью можно создавать:

  • размытие (blur);
  • оттенки и контраст;
  • комбинированные фильтры через цепочку фильтров (feGaussianBlur, feColorMatrix, feOffset).

Пример размытия:

const rect = draw.rect(100, 100).fill('red').move(50, 50);
const blur = draw.filter().blur(5);
rect.filterWith(blur);

Фильтры могут быть анимированы, что расширяет возможности визуальных эффектов.

SVG.path.js

Плагин SVG.path.js обеспечивает работу с пути (path):

  • создание сложных кривых и фигур;
  • вычисление длины пути (length());
  • извлечение точки по определённой позиции на пути (pointAt()).

Пример анимации вдоль пути:

const path = draw.path('M10 80 C 40 10, 65 10, 95 80').fill('none').stroke({ width: 2 });
const circle = draw.circle(10).fill('blue');

circle.animate(3000).during((pos, morph, eased) => {
  const p = path.pointAt(path.length() * eased);
  circle.center(p.x, p.y);
});

Так можно создавать динамические движения объектов по кривым и сложным траекториям.

SVG.easing.js

Хотя базовая библиотека поддерживает простые easing-функции, плагин SVG.easing.js добавляет расширенные кривые ускорения: elastic, bounce, back. Это позволяет создавать реалистичные и эффектные анимации.

Пример:

circle.animate(2000, 'bounce').move(150, 150);

Эффект «прыжка» делает движение более живым и органичным.

Интеграция нескольких плагинов

SVG.js поддерживает одновременное подключение нескольких плагинов, что позволяет комбинировать:

  • анимацию (svg.animation.js);
  • перетаскивание (svg.draggable.js);
  • фильтры (svg.filter.js);
  • сложные пути (svg.path.js).

Комбинирование плагинов создаёт полноценную интерактивную графику в браузере, управляемую через JavaScript, без необходимости сторонних фреймворков.

Эта гибкость делает SVG.js одной из самых мощных библиотек для работы с векторной графикой на клиентской стороне.

Оглавление