Размеры и атрибуты холста

В Snap.svg холст создаётся с помощью функции Snap(width, height). Параметры width и height определяют размеры SVG-элемента в пикселях. Например:

var s = Snap(800, 600);

Здесь создаётся холст шириной 800px и высотой 600px. Этот холст автоматически вставляется в <body> документа, если не указано иное. Для более точного контроля над размещением холста можно использовать метод appendTo или передать существующий HTML-элемент в качестве контейнера:

var container = document.getElementById('svg-container');
var s = Snap(container.offsetWidth, container.offsetHeight);
container.appendChild(s.node);

Snap.svg поддерживает динамическое изменение размеров холста через свойства attr:

s.attr({
    width: 1024,
    height: 768
});

Это позволяет подстраивать холст под изменение размеров окна или контейнера.

Атрибуты холста

SVG-холст в Snap.svg является элементом <svg> и поддерживает стандартные SVG-атрибуты, такие как viewBox, preserveAspectRatio, id, class и другие.

ViewBox

viewBox задаёт координатную систему холста, позволяя масштабировать содержимое независимо от размеров контейнера. Формат: "minX minY width height".

s.attr({
    viewBox: "0 0 800 600"
});

Здесь 0 0 задают верхний левый угол координатной системы, а 800 600 — ширину и высоту виртуального холста.

PreserveAspectRatio

Этот атрибут управляет тем, как содержимое масштабируется при изменении размеров холста:

s.attr({
    preserveAspectRatio: "xMidYMid meet"
});

Возможные значения:

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

Использование viewBox и preserveAspectRatio позволяет создавать адаптивные SVG-графики, которые корректно отображаются на разных устройствах.

Основные свойства холста

  • width / height — размеры холста в пикселях. Можно изменять динамически через attr.
  • node — возвращает нативный DOM-элемент <svg>. Полезно для интеграции с другими библиотеками или прямого манипулирования DOM.
  • paper — объект холста, через который создаются все графические элементы: линии, прямоугольники, круги, пути.

Пример использования node и paper:

var s = Snap(500, 500);
console.log(s.node); // <svg width="500" height="500"></svg>

var circle = s.circle(250, 250, 100);
circle.attr({
    fill: "#3498db",
    stroke: "#2980b9",
    strokeWidth: 5
});

Единицы измерения

Snap.svg использует пиксели по умолчанию. Можно задавать размеры и координаты в других единицах, таких как % или em, но при этом viewBox обеспечивает правильное масштабирование.

s.attr({
    width: "100%",
    height: "100%"
});

Такой подход часто используется при адаптивной верстке, когда SVG-холст должен растягиваться на всю ширину контейнера.

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

Изменение размеров холста через attr автоматически не масштабирует уже добавленные элементы. Для масштабирования содержимого необходимо использовать трансформации или менять viewBox.

Пример динамического масштабирования через viewBox:

function resizeCanvas(newWidth, newHeight) {
    s.attr({
        width: newWidth,
        height: newHeight,
        viewBox: "0 0 800 600"
    });
}

Все элементы сохранят свои координаты относительно виртуальной системы 0 0 800 600, что обеспечивает предсказуемое поведение при адаптации к разным разрешениям экрана.

Итоговая структура холста

  1. Определение размеров через width и height — реальные размеры в пикселях.
  2. Настройка viewBox — виртуальная координатная система, основа для масштабирования.
  3. Управление preserveAspectRatio — определяет способ вписывания содержимого в контейнер.
  4. Использование node и paper — доступ к DOM и создание графических объектов.

Комбинирование этих свойств обеспечивает полный контроль над холстом, адаптивностью и качеством графики в Snap.svg.

Оглавление