Работа с размерами элементов

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

Определение размеров элементов

Размеры элемента задаются через методы size(), width() и height().

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

let draw = SVG().addTo('body').size(800, 600);

let rect = draw.rect(200, 100); // ширина 200, высота 100
rect.width(150); // изменение ширины
rect.height(80); // изменение высоты
rect.size(300, 120); // установка новых размеров сразу для ширины и высоты

Особенности методов:

  • width(value) и height(value) могут принимать числа (пиксели) или строки с указанием единицы ('50%', '10em').
  • size(width, height) — устанавливает одновременно ширину и высоту, что удобно при изменении пропорций элемента.

Масштабирование элементов

Для масштабирования SVG.js использует метод scale(), который работает относительно текущего размера элемента:

let circle = draw.circle(100);
circle.scale(2); // увеличивает радиус в два раза
circle.scale(0.5); // уменьшает радиус вдвое

Важно: scale() изменяет визуальный размер элемента без изменения его атрибутов width и height. Для постоянного изменения размеров лучше использовать size().

Работа с атрибутами viewBox и preserveAspectRatio

Эти атрибуты управляют поведением масштабирования всего контейнера SVG:

let svg = draw.svg('<svg viewBox="0 0 400 400"></svg>');
svg.viewbox(0, 0, 400, 400); // задает видимую область
svg.attr('preserveAspectRatio', 'xMidYMid meet'); // сохранение пропорций при масштабировании
  • viewBox(x, y, width, height) определяет координаты и размеры области отображения.
  • preserveAspectRatio контролирует, как содержимое масштабируется и позиционируется внутри контейнера.

Задание размеров через проценты

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

let rect = draw.rect('50%', '25%');
rect.move('25%', '50%'); // позиционирование также в процентах

Процентные значения рассчитываются относительно родительского контейнера. Для элементов, вложенных в <g> или другие группы, процентные размеры применяются относительно ближайшего SVG-контейнера.

Пропорциональное масштабирование

Чтобы сохранить соотношение сторон при изменении размера, используется метод size() в сочетании с функцией width() или height():

let rect = draw.rect(200, 100);
let aspect = rect.width() / rect.height();

rect.width(300);
rect.height(300 / aspect); // сохраняем пропорции

Также можно использовать метод bbox() для получения размеров и координат элемента:

let box = rect.bbox();
console.log(box.width, box.height, box.x, box.y);

Метод bbox() возвращает реальные размеры элемента, учитывая трансформации и стили.

Анимация изменения размеров

SVG.js поддерживает анимацию размеров через метод animate():

rect.animate(1000, '<>').size(400, 200); // плавное изменение ширины и высоты за 1 секунду
  • Первый параметр — длительность анимации в миллисекундах.
  • Второй параметр — тип easing ('<>', '>', '<', 'linear').
  • Метод size() в анимации автоматически анимирует как ширину, так и высоту.

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

Для сложных случаев применяется transform():

rect.transform({ scaleX: 1.5, scaleY: 0.5, origin: 'center' });
  • scaleX и scaleY задают масштаб по осям X и Y.
  • origin определяет точку, вокруг которой происходит трансформация ('top-left', 'center', или координаты {x, y}).

Размеры текста и шрифтов

SVG.js управляет размерами текста через метод font():

let text = draw.text('Пример');
text.font({ size: 24, family: 'Arial', anchor: 'middle' });
  • size — размер шрифта.
  • anchor — позиция текста относительно координат (start, middle, end).

Резюме подходов к работе с размерами

  1. Прямое задание размеров: width(), height(), size().
  2. Масштабирование: scale(), transform({scaleX, scaleY}).
  3. Адаптивные размеры: использование процентов и viewBox.
  4. Пропорции: расчет через bbox() и сохранение соотношения сторон.
  5. Анимация размеров: animate().size().
  6. Текстовые элементы: управление через font().

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

Оглавление