Архитектура плагинов SVG.js

Библиотека SVG.js построена вокруг расширяемой архитектуры, позволяющей добавлять новые функции через плагины. Плагины дают возможность создавать собственные элементы, методы, фильтры и анимации, сохраняя при этом совместимость с основным API библиотеки.

Регистрация плагинов

Плагин в SVG.js — это функция, которая получает объект библиотеки в качестве аргумента. Стандартная схема регистрации выглядит так:

SVG.extend(SVG.Element, {
  customMethod() {
    // реализация метода
    return this;
  }
});
  • SVG.extend — основной инструмент для расширения функциональности.
  • Первый параметр указывает, какие классы элементов расширяются (SVG.Element, SVG.Container, SVG.FX).
  • Второй параметр — объект с методами, которые будут добавлены.

Можно создавать плагины, которые расширяют сразу несколько классов. Например, методы анимации применимы к SVG.FX, а методы трансформации — к SVG.Element.

Создание новых элементов

Для добавления пользовательских элементов используется функция SVG.register(). Пример создания нового элемента Star:

SVG.register('Star', {
  create(x, y, points, radius1, radius2) {
    const pathData = [];
    for (let i = 0; i < points; i++) {
      let angle = (i * 2 * Math.PI) / points;
      let r = i % 2 === 0 ? radius1 : radius2;
      pathData.push(
        `${i === 0 ? 'M' : 'L'}${x + r * Math.cos(angle)},${y + r * Math.sin(angle)}`
      );
    }
    pathData.push('Z');
    return this.path(pathData.join(' '));
  }
});
  • SVG.register принимает имя нового элемента и объект с методами для него.
  • Метод create создаёт структуру элемента и возвращает SVG-объект.

Созданный элемент становится доступным через стандартный синтаксис:

const draw = SVG().addTo('#canvas').size(300, 300);
draw.Star().create(150, 150, 5, 50, 25).fill('yellow').stroke({ width: 2 });

Расширение методов существующих элементов

Плагины часто используют SVG.extend для добавления методов к существующим классам. Пример добавления метода для плавного изменения цвета:

SVG.extend(SVG.Element, {
  transitionColor(color, duration = 1000) {
    return this.animate(duration).attr({ fill: color });
  }
});
  • SVG.Element — базовый класс всех SVG-элементов.
  • Методы, добавленные через extend, становятся доступными на любом элементе: rect.transitionColor('red').

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

SVG.js поддерживает плагины для фильтров и эффектов. Для расширения фильтров используется SVG.extend(SVG.Filter, {...}). Например, добавление размытия по Гауссу:

SVG.extend(SVG.Filter, {
  customBlur(amount = 2) {
    return this.gaussianBlur(amount);
  }
});

Применение к элементу:

rect.filterWith(function(add) {
  add.customBlur(5);
});
  • Фильтры создаются через filterWith, а их элементы добавляются через функцию-колбек.
  • Пользовательские методы фильтров интегрируются с существующими стандартными фильтрами библиотеки.

Анимации и FX-плагины

Анимационные плагины работают с классом SVG.FX. Расширение происходит аналогично:

SVG.extend(SVG.FX, {
  bounce(duration = 500) {
    return this.animate(duration, '<>').transform({ scale: 1.2 }).animate(duration, '<>').transform({ scale: 1 });
  }
});
  • SVG.FX управляет всеми анимационными цепочками.
  • Добавленные методы могут использовать существующие анимационные возможности (animate, transform, attr).
  • Вызов анимации: rect.fx().bounce();

Поддержка модульной структуры

SVG.js построен с учётом модульности:

  • Основная библиотека минимальна и обеспечивает базовый API.
  • Плагины подключаются по мере необходимости, что позволяет оптимизировать размер сборки.
  • Каждый плагин может иметь собственные зависимости, но при этом полностью интегрируется с ядром.

Принципы написания плагинов

  1. Изоляция логики — методы плагина не должны изменять глобальное состояние библиотеки.
  2. Цепочечность — большинство методов возвращают this для поддержки цепочек вызовов.
  3. Совместимость с типами элементов — методы должны проверять класс объекта перед применением.
  4. Лёгкость интеграции — плагины используют существующие механизмы библиотеки (SVG.extend, SVG.register, filterWith, fx).

Примеры комплексных плагинов

  • Плагин для генерации геометрических фигур: добавляет новые элементы с настраиваемыми параметрами.
  • Плагин для анимационных паттернов: создаёт повторяющиеся анимации с возможностью синхронизации разных элементов.
  • Плагин визуальных эффектов: объединяет фильтры, маски и цветовые трансформации в едином методе.

Архитектура плагинов SVG.js обеспечивает гибкость: любой функционал может быть добавлен через расширение существующих классов или регистрацию новых элементов без изменения исходного кода библиотеки. Это создаёт основу для построения сложных визуальных приложений с модульным, легко поддерживаемым кодом.

Оглавление