Система координат и viewport

Snap.svg использует декартову систему координат, где точка (0, 0) находится в левом верхнем углу холста. Ось X направлена вправо, а ось Y — вниз. Все элементы, создаваемые с помощью Snap.svg, позиционируются относительно этой системы координат.

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

  • Единицы измерения по умолчанию — пиксели.
  • Координаты элементов можно задавать как целыми числами, так и с плавающей точкой.
  • Положение элементов определяется через атрибуты x, y, cx, cy (для кругов), x1, y1, x2, y2 (для линий) и другие, специфичные для типа элемента.

Пример создания круга в Snap.svg:

var s = Snap(800, 600);
var circle = s.circle(100, 100, 50); // cx=100, cy=100, r=50
circle.attr({
    fill: "#3498db",
    stroke: "#2980b9",
    strokeWidth: 5
});

В этом примере центр круга находится в точке (100, 100) относительно верхнего левого угла холста.

Viewport и область отображения

Viewport — это область видимости, которая ограничивает, какая часть SVG видна на экране. В Snap.svg viewport определяется размерами контейнера, в котором создается объект Snap.

var s = Snap("#svgContainer"); // где <svg id="svgContainer"></svg> в HTML

Ключевые свойства viewport:

  • width и height — ширина и высота видимой области.
  • Элементы, находящиеся за пределами viewport, не исчезают, но могут быть обрезаны, если используется атрибут overflow: hidden.
  • Viewport служит основой для работы с координатной системой, поскольку все координаты элементов привязаны к нему.

Атрибут viewBox

viewBox позволяет определить систему координат внутри viewport, делая возможным масштабирование и адаптацию к разным размерам холста. Формат: "minX minY width height".

Пример:

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

Здесь:

  • minX и minY — координаты верхнего левого угла видимой области внутри SVG.
  • width и height — размеры координатной системы. Все элементы теперь позиционируются относительно этой системы, а не абсолютных пикселей viewport.

Особенности использования viewBox:

  • Масштабирование происходит автоматически при изменении размеров контейнера.
  • Элементы остаются пропорциональными при изменении ширины и высоты SVG.
  • Позволяет работать с очень большими или маленькими координатными сетками без изменения размеров элементов.

Преобразование координат и transform

Snap.svg предоставляет мощные возможности для работы с координатами через трансформации: translate, scale, rotate, matrix. Трансформации можно применять к отдельным элементам или группам (<g>).

Пример трансформации:

var rect = s.rect(50, 50, 100, 100);
rect.transform("translate(200, 150) rotate(45, 100, 100)");

Здесь:

  • translate(200, 150) — перемещает элемент на 200 пикселей вправо и 150 вниз.
  • rotate(45, 100, 100) — поворачивает элемент на 45° относительно точки (100, 100).

Ключевые моменты трансформаций:

  • Все трансформации относительны текущей позиции элемента.
  • Порядок применения трансформаций важен: сначала translate, потом rotate, потом scale.
  • Можно использовать матрицы для комбинирования нескольких трансформаций в одну.

Система координат для групп

Snap.svg позволяет объединять элементы в группы через метод group. Группа наследует систему координат, позволяя управлять несколькими элементами одновременно.

Пример:

var circle1 = s.circle(0, 0, 50);
var circle2 = s.circle(100, 0, 50);
var grp = s.group(circle1, circle2);
grp.transform("translate(200, 200)");

Все элементы группы смещаются вместе, сохраняя относительные координаты внутри группы.

Особенности работы с группами:

  • Координаты внутри группы локальные относительно группы.
  • Можно применять трансформации к группе, не изменяя координаты отдельных элементов.
  • ViewBox и viewport влияют на группы так же, как и на отдельные элементы.

Практическое использование координат и viewport

  1. Адаптивная графика: Использование viewBox позволяет создавать графику, которая масштабируется под любой экран.
  2. Анимации и трансформации: Систематическое управление координатами через группы и transform облегчает сложные анимации.
  3. Композиция элементов: Локальные системы координат для групп упрощают построение сложных сцен с повторяющимися элементами.
  4. Точность позиционирования: Работа с viewBox позволяет позиционировать элементы с высокой точностью без привязки к пикселям viewport.

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

Оглавление