Первый пример работы

Для работы с библиотекой SVG.js первым шагом является создание контейнера, в котором будут размещаться графические элементы. Контейнер создается через объект SVG(), который принимает в качестве параметра ID или DOM-элемент, куда будет вставлен SVG:

// Создание SVG-контейнера в элементе с id="drawing"
const draw = SVG().addTo('#drawing').size(600, 400);

Метод size(width, height) задает размеры контейнера в пикселях. Контейнер автоматически создается как тег <svg> в DOM, и все последующие фигуры будут добавляться внутрь него.

Создание базовых фигур

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

Прямоугольник

const rect = draw.rect(150, 100).attr({ fill: '#f06', stroke: '#000', 'stroke-width': 3 });
  • rect(width, height) — задает размеры прямоугольника.
  • attr({...}) — устанавливает атрибуты: цвет заливки (fill), цвет обводки (stroke) и ширину линии (stroke-width).
  • Прямоугольник можно перемещать с помощью move(x, y):
rect.move(50, 50);

Круг

const circle = draw.circle(80).attr({ fill: '#0f9', stroke: '#000', 'stroke-width': 2 });
circle.center(300, 150);
  • circle(diameter) — задает диаметр круга.
  • center(x, y) — устанавливает координаты центра круга.

Эллипс

const ellipse = draw.ellipse(120, 80).attr({ fill: '#09f', stroke: '#000' });
ellipse.center(450, 150);
  • ellipse(width, height) задает размеры по горизонтали и вертикали.

Линия

const line = draw.line(50, 300, 550, 300).stroke({ width: 4, color: '#f60' });
  • line(x1, y1, x2, y2) задает начальные и конечные координаты.
  • Метод stroke() упрощает настройку обводки линии.

Полигон

const polygon = draw.polygon('200,350 250,250 300,350').fill('#ff0').stroke({ width: 2 });
  • polygon('x1,y1 x2,y2 x3,y3') — задает вершины многоугольника через строку координат.

Текст

const text = draw.text('Привет, SVG.js!').move(50, 20).font({ size: 24, family: 'Arial', anchor: 'start' });
  • text('...') создает текстовый элемент.
  • Метод font({...}) позволяет настроить размер шрифта, семейство и выравнивание.

Работа с группами элементов

Группировка позволяет объединять несколько объектов для совместного управления:

const group = draw.group();
group.add(rect);
group.add(circle);
group.move(50, 50);
  • group() создаёт контейнер для элементов.
  • Все элементы внутри группы смещаются и трансформируются вместе.

Трансформации и анимация

SVG.js предоставляет простые методы для трансформаций: move, center, rotate, scale и skew.

rect.rotate(45, 125, 100); // Поворот на 45° вокруг точки (125, 100)
circle.scale(1.5);         // Увеличение размера круга в 1.5 раза

Анимации выполняются через метод animate(duration, easing):

circle.animate(1000, '<>').move(400, 200).attr({ fill: '#f00' });
  • 1000 — длительность в миллисекундах.
  • '<>' — функция плавности (easing).
  • Можно комбинировать перемещение, изменение размеров и атрибутов в одной цепочке.

Работа с событиями

SVG.js позволяет привязывать обработчики событий к элементам:

rect.click(function() {
    this.fill({ color: '#0ff' });
});

circle.mouseover(function() {
    this.scale(1.2);
});

circle.mouseout(function() {
    this.scale(1);
});
  • click(), mouseover(), mouseout() — стандартные события мыши.
  • Внутри обработчика this ссылается на сам SVG-элемент.

Комплексный пример

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

const box = draw.rect(100, 100).fill('#f06').move(100, 100).stroke({ width: 3, color: '#000' });

box.hover(
    function() { this.fill({ color: '#0f9' }).scale(1.2); },
    function() { this.fill({ color: '#f06' }).scale(1); }
);

box.animate(2000, '<>').rotate(360).loop();
  • hover(inFn, outFn) задает поведение при наведении и уходе мыши.
  • Метод loop() позволяет бесконечно повторять анимацию.

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

Оглавление