ViewBox и координатные системы

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

Атрибуты ViewBox

Формат записи:

  • minX и minY — координаты верхнего левого угла видимой области.
  • width и height — ширина и высота этой области.

Пример:

В данном случае координаты (0,0) соответствуют верхнему левому углу, а (200,100) — нижнему правому.

Влияние ViewBox на трансформации

GSAP оперирует пикселями экрана, но при работе с SVG ключевое значение имеют координаты, определённые через ViewBox. Если размеры SVG отличаются от размеров элемента на странице, GSAP автоматически масштабирует анимацию под визуальные размеры, но внутренняя система координат остаётся неизменной.

Например, анимация движения объекта по оси X:

gsap.to("#rect", { x: 100, duration: 2 });

Если SVG имеет viewBox="0 0 200 100" и ширину на странице 400px, фактическое движение на экране составит 200px. Это важно учитывать при синхронизации анимаций с другими элементами страницы.

Координатные системы SVG

SVG использует несколько уровней координатных систем:

  1. Локальная координатная система элемента — определяется атрибутами x, y, width, height и трансформациями (transform).
  2. Координатная система контейнера (SVG) — определяется атрибутом viewBox.
  3. Координатная система экрана — физические пиксели браузера, зависящие от CSS-размеров SVG.

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

Трансформации и ViewBox

GSAP позволяет изменять свойства:

  • x, y — смещение по осям;
  • scale, scaleX, scaleY — масштабирование;
  • rotation, rotationX, rotationY — поворот;
  • transformOrigin — точка опоры для трансформаций.

Особенности работы с transformOrigin:

По умолчанию transformOrigin привязан к координатной системе элемента. Для корректного центрирования часто используют:

gsap.to("#circle", { scale: 2, transformOrigin: "50% 50%" });

Здесь координаты 50% от ширины и высоты элемента. Важно понимать, что при наличии viewBox эти проценты вычисляются относительно локальной системы SVG, а не физических пикселей на странице.

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

Анимации GSAP могут быть чувствительны к соотношению сторон SVG и его контейнера. Для сохранения пропорций:

  • xMidYMid — центрирование по горизонтали и вертикали.
  • meet — масштабирование для полного вхождения SVG в контейнер без обрезки.

При этом GSAP корректно интерпретирует координаты в viewBox, сохраняя визуальную консистентность анимации.

Примеры синхронизации нескольких анимаций

gsap.timeline()
  .to("#rect1", { x: 50, duration: 1 })
  .to("#rect2", { x: 150, duration: 1 }, "<"); // "<" синхронизирует начало

При этом все элементы используют координаты, заданные viewBox, и независимо от реального размера SVG на странице GSAP адаптирует движение.

Важные нюансы

  1. Отрицательные координаты — допустимы в viewBox и изменяют начальную точку системы координат.
  2. Изменение размеров SVG через CSS — не изменяет координатную систему, но масштабирует визуальное отображение, что может влиять на анимацию смещений.
  3. Группировка элементов () — позволяет применять трансформации к группе с сохранением внутренней координатной системы. GSAP корректно обрабатывает трансформации таких групп.
Оглавление