Сохранение пропорций

Snap.svg предоставляет гибкие возможности для работы с векторной графикой, включая точный контроль над размерами и пропорциями элементов. Сохранение пропорций важно при масштабировании объектов, чтобы форма оставалась правильной, а изображение не искажалось.

Масштабирование с сохранением пропорций

Для изменения размеров элементов используется метод .transform() или специализированные функции .attr(). Пропорциональное масштабирование достигается сохранением соотношения ширины и высоты:

var s = Snap("#svg");
var rect = s.rect(0, 0, 100, 50);

// Масштабирование с сохранением пропорций
var scaleFactor = 2; // коэффициент увеличения
rect.transform('s' + scaleFactor); // 's' = scale

Метод s в трансформации увеличивает объект по обоим осям одновременно. Если требуется масштабирование относительно определённой точки, можно указать координаты центра:

rect.transform('s2,2,50,25'); // масштабирование относительно центра прямоугольника

Использование viewBox для адаптивного масштабирования

Элемент <svg> поддерживает атрибут viewBox, который позволяет автоматически подгонять содержимое под размеры контейнера, сохраняя пропорции. В Snap.svg это делается через метод .attr():

s.attr({
    viewBox: "0 0 200 100",
    preserveAspectRatio: "xMidYMid meet"
});

Ключевые моменты:

  • viewBox задаёт координатную систему для всех элементов SVG.

  • preserveAspectRatio управляет поведением при изменении размеров контейнера:

    • "xMinYMin meet" — масштабирование, сохраняющее пропорции, привязка к верхнему левому углу.
    • "xMidYMid meet" — масштабирование по центру с сохранением пропорций.
    • "none" — растягивает содержимое без сохранения пропорций.

Пропорциональное изменение размеров через .attr()

Snap.svg позволяет напрямую менять ширину и высоту с сохранением пропорций:

var circle = s.circle(50, 50, 40);
var originalRadius = circle.attr("r");
var scaleFactor = 1.5;

circle.attr({
    r: originalRadius * scaleFactor
});

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

var rect = s.rect(0, 0, 100, 50);
var scale = 1.8;
rect.attr({
    width: rect.attr("width") * scale,
    height: rect.attr("height") * scale
});

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

Snap.svg поддерживает группировку объектов через g(). Масштабирование группы автоматически сохраняет пропорции всех вложенных элементов:

var group = s.group(rect, circle);
group.transform('s1.5,1.5,0,0'); // масштабирование всей группы относительно начала координат

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

Взаимодействие с событиями и динамическое масштабирование

Можно использовать события, чтобы масштабировать объекты динамически, сохраняя пропорции. Например, привязка к ползунку:

var slider = document.getElementById("scaleSlider");
slider.addEventListener("input", function() {
    var scale = this.value;
    rect.transform('s' + scale + ',' + scale + ',50,25');
});

В этом примере масштабирование идёт относительно центра прямоугольника, что предотвращает смещение при увеличении или уменьшении.

Закрепление пропорций через вычисление коэффициента

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

var w = rect.attr("width");
var h = rect.attr("height");
var maxSize = 200;

var scale = Math.min(maxSize / w, maxSize / h);
rect.transform('s' + scale + ',' + scale + ',0,0');

Такой подход гарантирует, что объект вписывается в заданный контейнер, сохраняя исходные пропорции.

Использование методов Snap.svg для удобного управления

Snap.svg предоставляет вспомогательные функции для управления размерами и трансформациями: .getBBox(), .getTotalLength(), .clone(). Например:

var bbox = rect.getBBox();
var scale = 150 / bbox.width;
rect.transform('s' + scale);

getBBox() возвращает реальные размеры объекта с учётом трансформаций, что позволяет корректно вычислять коэффициент масштабирования для любых фигур.

Эти подходы обеспечивают точное управление размерами и пропорциями объектов в Snap.svg, поддерживая визуальную целостность SVG-графики при динамических изменениях размеров и адаптации под разные экраны.

Оглавление