Утилитарные функции

Библиотека SVG.js предоставляет удобный способ работы с элементами SVG через объектно-ориентированный API. Основой любой графики является холст, создаваемый с помощью метода SVG(). Он возвращает объект SVG.Doc, который служит корнем для всех последующих элементов.

const draw = SVG().addTo('body').size(800, 600);

Параметры метода size(width, height) задают размеры холста. При необходимости можно управлять вьюпортом через метод viewbox(x, y, width, height), что позволяет масштабировать содержимое без изменения размеров контейнера.

draw.viewbox(0, 0, 400, 300);

Утилитарные методы для работы с элементами

attr()

Метод attr() используется для установки и получения атрибутов элементов.

const rect = draw.rect(100, 50).attr({ fill: '#f06', stroke: '#000', 'stroke-width': 2 });

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

  • Множественное задание атрибутов через объект.
  • Чтение атрибутов через вызов attr('имя_атрибута').
  • Поддержка SVG-специфических атрибутов, таких как rx, ry, transform.

transform()

Метод transform() позволяет применять трансформации к элементам: поворот, масштабирование, смещение.

rect.transform({ rotate: 45, scaleX: 1.5 });

Формат объекта:

  • x, y — смещение.
  • rotate — угол поворота.
  • scaleX, scaleY — масштабирование по осям.
  • skewX, skewY — сдвиг по осям.

data()

Для хранения пользовательских данных элемент предоставляет метод data(). Это особенно полезно для связывания объектов с бизнес-логикой.

rect.data('id', 123).data('category', 'button');
  • Чтение данных: rect.data('id') возвращает 123.
  • Удаление данных: rect.removeData('id').

Работа с группами и контейнерами

group()

Элементы SVG можно объединять в группы для коллективного управления. Метод group() создаёт контейнер, который наследует все методы элементов:

const g = draw.group();
const circle = g.circle(50).fill('blue');
const square = g.rect(50, 50).fill('red');
g.transform({ x: 100, y: 50 });

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

  • Применение трансформаций ко всей группе.
  • Упрощение управления атрибутами для нескольких элементов одновременно.
  • Возможность создания вложенных групп для иерархической структуры.

Утилиты для геометрии

bbox()

Метод bbox() возвращает ограничивающий прямоугольник элемента с координатами и размерами:

const box = rect.bbox();
console.log(box.x, box.y, box.width, box.height);

Используется для:

  • Расчета положения элементов.
  • Определения столкновений и перекрытий.
  • Автоматической подгонки элементов в контейнер.

cx(), cy(), center()

Позволяют быстро управлять центром элементов:

rect.center(200, 150);
console.log(rect.cx(), rect.cy());

Эти методы автоматически пересчитывают координаты атрибутов x и y с учётом размеров элемента.

Анимация и временные утилиты

animate()

SVG.js предоставляет встроенный механизм анимации. Метод animate(duration, easing) возвращает объект для пошагового управления анимацией:

rect.animate(1000, '<>').move(300, 100).fill('#0f0');

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

  • Поддержка easing-функций: <, >, <>, -.
  • Возможность цепочки анимаций: animate().then(...).loop().
  • Анимация любых атрибутов и трансформаций.

loop() и delay()

Позволяют управлять повторением и задержкой анимаций:

rect.animate(1000).move(200, 50).loop(Infinity, true).delay(500);
  • loop(count, alternate) — количество повторов и чередование направления.
  • delay(ms) — задержка начала анимации.

Работа с текстом и шрифтами

Методы text() и font() позволяют добавлять и настраивать текст:

const t = draw.text('Hello SVG').font({ size: 24, family: 'Arial', anchor: 'middle' });
t.center(400, 300);

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

  • font() задаёт свойства шрифта через объект.
  • leading() регулирует межстрочный интервал.
  • length() возвращает ширину текста в пикселях для динамической верстки.

Встроенные утилиты для событий

Методы on() и off() обеспечивают работу с событиями SVG:

rect.on('click', () => console.log('Clicked!'));
rect.off('click');

Поддерживаются стандартные события DOM: click, mouseenter, mouseleave, mousedown, mouseup, mousemove.

Особенности событий в SVG.js:

  • Можно добавлять несколько обработчиков на один элемент.
  • Методы возвращают элемент, что позволяет использовать цепочку вызовов.

Работа с импортом и экспортом

Методы svg() позволяют получать или устанавливать внутреннее содержимое SVG:

const markup = draw.svg();
draw.svg('<circle cx="50" cy="50" r="40" fill="orange"/>');

Используется для:

  • Сохранения графики в виде строки SVG.
  • Динамического обновления содержимого.
  • Интеграции с внешними SVG-файлами.

Утилитарные функции для цветов и стилей

fill() и stroke()

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

rect.fill('#ff0').stroke({ color: '#000', width: 2, linecap: 'round' });
  • Поддержка CSS-совместимых форматов: hex, rgb(), rgba().
  • Возможность использования градиентов и паттернов.
  • Установка отдельных свойств обводки через объект.

Градиенты и паттерны

const gradient = draw.gradient('linear', function(add) {
    add.stop(0, '#f06');
    add.stop(1, '#0f6');
});
rect.fill(gradient);
  • gradient('linear') и gradient('radial') создают линейные и радиальные градиенты.
  • Градиенты можно масштабировать и анимировать вместе с элементом.
  • Паттерны создаются через pattern() и позволяют использовать текстуры и повторяющиеся элементы.

Математические утилиты

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

  • point(x, y) — создаёт объект точки для трансформаций и привязки.
  • matrix() — работа с матрицами трансформаций.
  • inside(x, y) — проверка попадания точки внутрь элемента.
  • intersect(rect) — проверка пересечения с другим элементом.

Эти методы упрощают вычисления сложных анимаций и интерактивных визуализаций.

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

Оглавление