Управление размерами canvas

В библиотеке SVG.js создание канваса осуществляется через метод SVG(), который возвращает объект <svg> с набором методов для дальнейшей работы. Основной синтаксис:

const draw = SVG().addTo('#container').size(600, 400);
  • addTo('#container') – добавляет <svg> в элемент с указанным селектором.
  • size(width, height) – задаёт размеры канваса. Можно использовать числа (в пикселях) или строки с единицами ('100%', '50vw').

Объект draw теперь содержит методы для управления элементами внутри SVG, а также позволяет динамически изменять размеры канваса после создания.

Изменение размеров канваса

Размеры канваса можно изменять двумя способами:

  1. Через метод size(width, height)
draw.size(800, 600); // Изменяет размеры канваса на 800x600px

Метод принимает числа или строки с единицами измерения. Если указать процентные значения, <svg> будет масштабироваться относительно родительского контейнера.

  1. Через методы width() и height()
draw.width(500);
draw.height(300);

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

const currentWidth = draw.width(); // возвращает число в пикселях
const currentHeight = draw.height();

Работа с viewBox

viewBox – ключевой инструмент для масштабирования и адаптивного отображения SVG. Он задаёт внутренние координаты канваса и позволяет корректно изменять размеры без искажения содержимого.

draw.viewbox(0, 0, 600, 400);
  • Первые два параметра (0, 0) – координаты верхнего левого угла внутренней области.
  • Последние два параметра (600, 400) – ширина и высота внутренней области.

Использование viewBox позволяет:

  • Масштабировать SVG пропорционально контейнеру.
  • Избегать обрезки содержимого при изменении размеров канваса.

Адаптивный SVG

Для адаптивных интерфейсов размеры канваса можно задавать в процентах, а затем применять viewBox для сохранения пропорций:

const draw = SVG().addTo('#container').size('100%', '100%').viewbox(0, 0, 600, 400);

Такой подход гарантирует, что SVG займёт весь контейнер и автоматически масштабируется при изменении его размеров.

Автоматическое масштабирование элементов

Когда размеры канваса изменяются, важно управлять масштабом внутренних объектов. Для этого можно использовать метод scale() для отдельных элементов или групп:

const rect = draw.rect(100, 50).fill('#f06');
rect.scale(2); // увеличивает объект в 2 раза

Для групп элементов используется group():

const g = draw.group();
g.add(rect);
g.scale(1.5); // масштабирование всей группы

Это позволяет сохранять пропорции всех объектов при изменении размеров канваса.

Ограничение минимальных и максимальных размеров

SVG.js не ограничивает размеры канваса по умолчанию, но можно реализовать контроль через CSS или Jav * aScript:

const container = document.getElementById('container');
window.addEventListener('resize', () => {
  let newWidth = Math.min(Math.max(container.clientWidth, 300), 1200);
  let newHeight = Math.min(Math.max(container.clientHeight, 200), 800);
  draw.size(newWidth, newHeight);
});

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

Практические приёмы работы с размерами

  • Процентные размеры + viewBox – основной способ создавать адаптивные SVG-интерфейсы.
  • Методы width() и height() – удобны для динамических изменений в коде.
  • Группы и scale() – управляют масштабом элементов без необходимости пересчитывать координаты.
  • События изменения окна – помогают синхронизировать размеры канваса с размером контейнера.

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

Оглавление