Создание контейнера для рисования

Для начала работы с библиотекой SVG.js необходимо создать контейнер, в котором будут размещаться все графические элементы. Контейнер представляет собой элемент <svg> в HTML-документе и управляется через объект SVG.Doc.

// Подключение контейнера к элементу с id 'drawing'
const draw = SVG().addTo('#drawing').size(800, 600);
  • SVG() – инициализация нового SVG-контейнера.
  • .addTo('#drawing') – привязка контейнера к существующему элементу DOM.
  • .size(800, 600) – установка размеров контейнера по ширине и высоте.

Контейнер может быть привязан к любому элементу страницы, включая div или section. Важно учитывать, что размеры контейнера определяют пространство для рисования, а отсутствие явной установки размеров приведет к появлению SVG с нулевыми размерами.

Настройка координатной системы

SVG использует собственную систему координат, в которой верхний левый угол имеет координаты (0, 0). Для удобства масштабирования и позиционирования элементов применяется метод viewbox:

draw.viewbox(0, 0, 800, 600);
  • Первые два значения (0, 0) задают смещение начала координат.
  • Последние два значения (800, 600) определяют видимую область.

Использование viewbox позволяет создавать адаптивную графику, которая корректно масштабируется при изменении размеров окна браузера.

Настройка фона контейнера

По умолчанию контейнер прозрачный, поэтому часто требуется задать фон:

draw.rect(800, 600).fill('#f0f0f0');
  • rect(800, 600) – создание прямоугольника размером с контейнер.
  • .fill('#f0f0f0') – установка цвета заливки.

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

Добавление слоёв

Контейнер поддерживает слои, позволяющие структурировать графику и управлять порядком отображения элементов. В SVG.js для этого используется метод group:

const backgroundLayer = draw.group();
const mainLayer = draw.group();
  • group() создаёт новый контейнер внутри SVG.
  • Все элементы, добавленные в backgroundLayer, будут рендериться под элементами mainLayer.

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

Управление размерами и адаптивность

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

const draw = SVG().addTo('#drawing').size('100%', '100%');
  • Использование процентов вместо фиксированных значений обеспечивает адаптивность.
  • Комбинация с viewbox гарантирует, что элементы будут пропорционально масштабироваться.

Примеры базовой структуры контейнера

Простейшая структура контейнера с фоном и слоем для объектов:

const draw = SVG().addTo('#drawing').size(800, 600);
draw.viewbox(0, 0, 800, 600);

const background = draw.rect(800, 600).fill('#e0e0e0');
const objectsLayer = draw.group();
  • draw – основной контейнер.
  • background – фон контейнера.
  • objectsLayer – слой для размещения всех графических объектов.

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

Настройка событий на контейнере

Контейнер может реагировать на события мыши и клавиатуры. Для этого используется стандартный синтаксис библиотеки:

draw.on('click', function(event) {
    console.log('Клик по контейнеру', event.offsetX, event.offsetY);
});
  • on('click', callback) – обработка клика.
  • event.offsetX и event.offsetY возвращают координаты внутри контейнера.

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

Управление масштабом и прокруткой

Для контейнера доступны методы трансформации, которые позволяют масштабировать или перемещать содержимое без изменения отдельных элементов:

draw.zoom(2); // Увеличение в 2 раза
draw.pan(50, 50); // Сдвиг содержимого
  • zoom(factor) изменяет масштаб всех элементов.
  • pan(x, y) смещает видимую область относительно координат.

Комбинация viewbox, zoom и pan обеспечивает гибкое управление пространством для сложной графики.

Итоговая структура и рекомендации

Эффективный SVG-контейнер состоит из нескольких ключевых компонентов:

  1. Основной контейнер – объект SVG.Doc, инициализированный с размерами.
  2. Viewbox – определяет видимую область и масштабируемость.
  3. Фон – прямоугольник или заливка для базового цвета.
  4. Слои (group) – логическая структура для упорядочивания объектов.
  5. События и трансформации – обработка интерактивности и масштабирования.

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

Оглавление