Размер и интервалы

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

var rect = s.rect(10, 10, 100, 50); // x, y, width, height
rect.attr({
    width: 150,
    height: 75
});

Здесь width и height задают фактические размеры элемента, а координаты x и y определяют его положение на холсте. Для кругов и эллипсов ключевыми являются радиусы:

var circle = s.circle(100, 100, 50); // cx, cy, r
circle.attr({
    r: 75
});

Изменение радиуса напрямую увеличивает или уменьшает окружность, не меняя её центра.

Для текста размер шрифта задается через атрибут font-size:

var text = s.text(50, 50, "Пример текста");
text.attr({
    "font-size": 24
});

Snap.svg поддерживает процентные размеры, особенно полезные при работе с встраиваемой графикой SVG внутри HTML:

rect.attr({
    width: "50%",
    height: "30%"
});

В этом случае размеры элемента будут зависеть от размеров контейнера SVG.

Отступы и интервалы между элементами

Для управления пространством между объектами применяется комбинация координат и специальных методов трансформации. Основные способы:

  1. Явное позиционирование через координаты:
var rect1 = s.rect(10, 10, 50, 50);
var rect2 = s.rect(70, 10, 50, 50); // 10px интервал между прямоугольниками
  1. Метод трансформации translate – позволяет сдвигать объект на указанное расстояние без изменения его атрибутов:
rect2.transform('t60,0'); // смещение на 60px по оси X
  1. Группировка элементов с помощью g и управление интервалами через смещение внутри группы:
var group = s.group(rect1, rect2);
group.transform('t20,20'); // сдвиг всей группы

Управление масштабом и пропорциями

Для сохранения пропорций при изменении размера важно использовать метод scale:

rect.scale(2, 2); // увеличивает ширину и высоту в 2 раза
circle.scale(1.5); // одинаковый масштаб по обеим осям

scale принимает два аргумента – по оси X и по оси Y, что позволяет создавать непропорциональные трансформации. Чтобы масштабирование происходило относительно определенной точки, добавляется третий и четвертый аргументы:

rect.scale(1.5, 1.5, 50, 50); // масштаб относительно точки (50,50)

Расстояния между объектами при динамическом создании

При создании массивов объектов полезно рассчитывать интервалы программно:

var spacing = 10;
for (var i = 0; i < 5; i++) {
    s.rect(10 + i * (50 + spacing), 10, 50, 50);
}

Здесь spacing определяет постоянный интервал между элементами, что особенно удобно для сеток и последовательностей графики.

Свойства viewBox и адаптивное масштабирование

Для управления общим масштабом всех объектов внутри SVG применяется атрибут viewBox:

s.attr({
    viewBox: "0 0 300 200"
});

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

Использование метода getBBox для вычисления интервалов

getBBox возвращает объект с размерами и положением элемента:

var bbox = rect.getBBox();
console.log(bbox.x, bbox.y, bbox.width, bbox.height);

Эта информация позволяет точно вычислять соседние интервалы, особенно при работе с текстом или динамически изменяющимися элементами.

Применение анимации для изменения размера и интервалов

Snap.svg поддерживает анимацию атрибутов через метод animate:

rect.animate({ width: 200, height: 100 }, 1000, mina.easeinout);
circle.animate({ r: 80 }, 800, mina.elastic);

Используя анимацию, можно плавно увеличивать элементы, изменять расстояние между ними, создавая динамическую и интерактивную графику.

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

Оглавление