ViewBox и его параметры

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

Стандартный синтаксис viewBox выглядит так:

svg.viewbox(x, y, width, height)
  • x и y — координаты верхнего левого угла виртуального окна (начало системы координат для содержимого).
  • width и height — размеры виртуального окна в единицах координат SVG.

Например:

const draw = SVG().addTo('body').size(400, 400);
draw.viewbox(0, 0, 200, 200);

В этом случае все объекты внутри SVG будут масштабироваться так, чтобы область 200×200 единиц занимала доступное пространство 400×400 пикселей, сохраняя пропорции.

Влияние viewBox на масштабирование

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

  • При увеличении width и height SVG контейнера содержимое растягивается пропорционально.
  • Если размеры контейнера меньше, чем viewBox, содержимое сжимается.
  • В SVG.js можно использовать метод size(width, height), чтобы комбинировать физический размер контейнера с виртуальной координатной системой viewBox.
draw.size(800, 400).viewbox(0, 0, 200, 200);

Здесь содержимое будет растянуто по горизонтали сильнее, чем по вертикали, если не использовать параметр preserveAspectRatio.

Параметр preserveAspectRatio

Метод viewbox в SVG.js поддерживает управление аспектом с помощью preserveAspectRatio. Он определяет, как содержимое масштабируется относительно контейнера:

draw.viewbox(0, 0, 200, 200).attr({ preserveAspectRatio: 'xMidYMid meet' });

Основные значения:

  • meet — содержимое масштабируется так, чтобы полностью уместиться в контейнер, сохраняя пропорции.
  • slice — содержимое масштабируется так, чтобы заполнить контейнер полностью, обрезая лишнее.
  • none — игнорирует сохранение пропорций, растягивая содержимое по осям X и Y независимо.
  • xMinYMin, xMidYMid, xMaxYMax — выравнивание содержимого по горизонтали и вертикали при масштабировании.

Работа с координатами внутри viewBox

Когда задаётся viewBox, все координаты элементов SVG интерпретируются относительно виртуальной системы координат. Например:

const rect = draw.rect(50, 50).move(25, 25);

Если установлен viewBox(0, 0, 200, 200) и контейнер имеет размер 400×400 пикселей, прямоугольник визуально будет занимать половину контейнера, потому что координаты масштабируются пропорционально.

Динамическое изменение viewBox

SVG.js позволяет изменять viewBox в процессе работы, что удобно для реализации анимации, масштабирования и панорамирования:

draw.viewbox({ x: 50, y: 50, width: 100, height: 100 });

Изменение этих параметров позволяет “приблизить” или “отдалить” определённую область графики, создавая эффект зума без изменения самих размеров элементов.

Советы по использованию

  • Для сложной графики стоит всегда задавать viewBox, чтобы SVG был адаптивным.
  • Использование preserveAspectRatio: 'xMidYMid meet' обеспечивает одинаковое масштабирование по обеим осям и предотвращает искажения.
  • При динамическом изменении viewBox необходимо учитывать точку начала координат (x, y) для корректного позиционирования элементов.

Интерактивный пример: панорамирование

let xOffset = 0;
let yOffset = 0;

setInterval(() => {
    xOffset += 1;
    yOffset += 0.5;
    draw.viewbox(xOffset, yOffset, 200, 200);
}, 30);

Такое управление viewBox позволяет создавать плавное движение камеры по SVG-сцене, не меняя размеры объектов.

Использование viewBox в SVG.js — это фундаментальный инструмент для масштабируемой и адаптивной графики, который обеспечивает точный контроль координатной системы, пропорций и масштабирования. Правильное понимание его параметров позволяет создавать интерактивные и динамичные SVG-приложения.

Оглавление