Методы создания элементов

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

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

После инициализации можно создавать базовые элементы:

  • Прямоугольник:
const rect = draw.rect(100, 50).attr({ fill: '#f06' });
  • Круг:
const circle = draw.circle(80).attr({ fill: '#0f9' }).move(150, 100);
  • Эллипс:
const ellipse = draw.ellipse(120, 60).attr({ fill: '#09f' }).move(200, 150);
  • Линия:
const line = draw.line(0, 0, 300, 200).stroke({ width: 2, color: '#000' });
  • Многоугольник и полилиния:
const polygon = draw.polygon('0,0 50,25 50,75 0,100').fill('#f90');
const polyline = draw.polyline('0,0 50,25 50,75 0,100').fill('none').stroke({ width: 2, color: '#09f' });

Каждый метод возвращает объект элемента, что позволяет применять к нему цепочку методов для изменения атрибутов, стилей и трансформаций.

Использование текста и группировки

Создание текстовых элементов осуществляется через метод text(). Он поддерживает многострочный текст и стилизацию отдельных частей с помощью функций обратного вызова:

const text = draw.text(function(add) {
  add.tspan('Привет, ').fill('#333');
  add.tspan('SVG.js').fill('#f06').font({ weight: 'bold', size: 24 });
}).move(50, 300);

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

const group = draw.group();
group.add(rect).add(circle).move(50, 50);
group.rotate(45);

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

Применение атрибутов и стилей

SVG.js поддерживает как стандартные SVG-атрибуты (fill, stroke, opacity), так и расширенные методы библиотеки:

circle.fill('#f00').stroke({ width: 5, color: '#000' }).opacity(0.7);
rect.radius(10); // Закругление углов
line.marker('end', draw.marker(10, 10, function(add) {
  add.path('M0,0 L0,10 L10,5 Z').fill('#000');
}));

Методы .attr() и .style() позволяют задавать множество свойств одновременно:

rect.attr({ x: 200, y: 100, width: 150, height: 80, fill: '#0ff' });
text.style({ fontFamily: 'Arial', fontSize: 18, fill: '#333' });

Работа с изображениями и ссылками

Добавление внешних изображений реализуется через метод image():

const img = draw.image('https://example.com/image.png').size(120, 80).move(300, 200);

Создание интерактивных ссылок:

const link = draw.link('https://example.com');
link.add(rect);

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

Использование символов и шаблонов

SVG.js поддерживает повторное использование элементов через use():

const star = draw.polygon('50,0 61,35 98,35 68,57 79,91 50,70 21,91 32,57 2,35 39,35').fill('#fc0');
const clone = star.use().move(150, 50);

Эта техника уменьшает количество кода и оптимизирует производительность при создании сложных сцен.

Создание сложных форм через path

Метод path() предоставляет полный контроль над геометрией:

const path = draw.path('M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80')
                 .fill('none')
                 .stroke({ width: 3, color: '#f06' });

Для динамических анимаций можно комбинировать path() с animate() и изменять атрибуты точек или длину пути.

Практика композиции элементов

Объединение нескольких типов элементов в композиции часто используется для создания графических интерфейсов и визуализаций. Пример сложного объекта:

const face = draw.group();
face.add(draw.circle(100).fill('#ff0').move(100, 100));
face.add(draw.circle(20).fill('#000').move(130, 130));
face.add(draw.circle(20).fill('#000').move(170, 130));
face.add(draw.path('M130,180 Q150,200 170,180').fill('none').stroke({ width: 4, color: '#000' }));
face.move(50, 50);

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

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

Оглавление