Адаптация под разные экраны

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

Использование viewBox и preserveAspectRatio

viewBox — ключевой атрибут для адаптивного SVG. Он определяет внутреннюю координатную систему графики:

var s = Snap("#svg");
s.attr({
    viewBox: "0 0 800 600"
});
  • Первые два значения задают координаты верхнего левого угла внутреннего пространства SVG (x и y),
  • последние два — ширину и высоту области.

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

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

Значение meet сохраняет пропорции, вписывая содержимое в контейнер, а slice масштабирует его так, чтобы заполнить контейнер полностью, даже с обрезкой краев.

Динамическое изменение размеров SVG

Для корректного масштабирования на разных экранах важно изменять размеры контейнера SVG пропорционально:

function resizeSVG() {
    var width = window.innerWidth * 0.8;
    var height = window.innerHeight * 0.6;
    s.attr({ width: width, height: height });
}

window.addEventListener("resize", resizeSVG);
resizeSVG();

Этот подход обеспечивает плавное подстраивание графики под размеры окна.

Масштабирование отдельных элементов

Snap.svg позволяет масштабировать отдельные элементы без изменения координат SVG. Метод transform используется для трансформаций:

var circle = s.circle(100, 100, 50);
circle.transform("s1.5,1.5,100,100"); // масштабирование относительно центра
  • s — масштаб
  • два последних параметра — координаты точки, относительно которой выполняется масштабирование

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

var scaleX = window.innerWidth / 800;
var scaleY = window.innerHeight / 600;
circle.transform(`s${scaleX},${scaleY},100,100`);

Расчет адаптивного расположения элементов

Элементы SVG часто привязываются к определенным координатам. Для адаптации под разные экраны координаты нужно пересчитывать динамически:

function placeElement(element, xPercent, yPercent) {
    var x = window.innerWidth * xPercent;
    var y = window.innerHeight * yPercent;
    element.attr({ cx: x, cy: y });
}

placeElement(circle, 0.5, 0.3); // 50% ширины, 30% высоты

Использование процентных значений упрощает адаптацию при изменении размеров окна.

Адаптивная типографика и размеры шрифтов

Snap.svg позволяет работать с текстом через метод text. Для адаптации размеров шрифта под экран используют пропорциональный расчет:

var t = s.text(0, 0, "Пример текста");
function resizeText() {
    var fontSize = Math.min(window.innerWidth, window.innerHeight) / 30;
    t.attr({ "font-size": fontSize });
}
window.addEventListener("resize", resizeText);
resizeText();

Такой метод гарантирует читаемость текста на разных устройствах.

Работа с группами элементов

Группировка через g упрощает масштабирование сложных объектов:

var group = s.group(circle, t);
group.transform(`s${scaleX},${scaleY}`);

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

Адаптация через CSS

SVG можно стилизовать через CSS, используя относительные единицы (%, vw, vh) для контейнера:

Это обеспечивает автоматическое масштабирование при изменении окна без использования JavaScript. Snap.svg при этом взаимодействует с элементами внутри SVG независимо от размеров контейнера.

Реактивное обновление при изменении размеров

Комбинация viewBox, preserveAspectRatio и динамических вычислений координат и трансформаций позволяет создавать полностью адаптивные графики. Для сложных интерфейсов полезно объединять:

  1. Масштабирование контейнера через CSS или JS
  2. Пересчет координат элементов пропорционально новым размерам
  3. Масштабирование текста и других визуальных объектов
  4. Использование групп для комплексных трансформаций

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

Оглавление