Создание путей программно

В SVG.js создание и управление путями осуществляется с помощью объекта SVG.Path или метода draw.path(). Путь (<path>) представляет собой набор команд, определяющих линии, кривые и сегменты, которые формируют сложные фигуры. Важно понимать, что путь может содержать несколько команд в одном элементе, что позволяет создавать сложные контуры без использования множества отдельных элементов.

Простейший путь создаётся так:

const draw = SVG().addTo('body').size(600, 400);
const path = draw.path('M50 50 L150 50 L150 150 L50 150 Z');
path.fill('none').stroke({ width: 2, color: '#f06' });

Разбор команд пути:

  • M x y — moveTo: перемещение пера в точку (x, y) без рисования линии.
  • L x y — lineTo: рисование линии до точки (x, y).
  • H x / V y — горизонтальная и вертикальная линия.
  • C x1 y1, x2 y2, x y — кубическая кривую Безье.
  • S x2 y2, x y — сглаженная кубическая кривая.
  • Q x1 y1, x y — квадратичная кривая Безье.
  • T x y — сглаженная квадратичная кривая.
  • A rx ry x-axis-rotation large-arc-flag sweep-flag x y — дуга.
  • Z — закрытие контура.

Все координаты могут быть абсолютными (заглавные буквы) или относительными (строчные).

Программная генерация сложных путей

Для динамического создания фигур удобнее использовать метод path.array() или построение массива команд:

const commands = [
  ['M', 50, 50],
  ['L', 150, 50],
  ['L', 150, 150],
  ['L', 50, 150],
  ['Z']
];

const dynamicPath = draw.path(commands).fill('none').stroke({ width: 3, color: '#0a0' });

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

Методы для работы с путями

SVG.js предоставляет удобные методы для изменения и анализа пути после его создания:

  • plot(array) — задаёт новый массив команд для существующего пути.
  • move(x, y) — перемещает весь путь на координаты (x, y).
  • size(width, height) — изменяет размеры пути с масштабированием.
  • scale(factorX, factorY) — масштабирование относительно центра пути.
  • rotate(angle, cx, cy) — поворот вокруг точки (cx, cy).

Пример динамического изменения пути:

const dynamic = draw.path('M0 0 L100 0 L100 100 Z').fill('blue');
dynamic.plot([['M', 0, 0], ['L', 150, 0], ['L', 150, 150], ['Z']]);
dynamic.rotate(45, 75, 75);

Работа с кривыми Безье

Кривые Безье позволяют создавать плавные контуры. Для кубической кривой используется C:

draw.path('M50 200 C 70 100, 150 100, 170 200')
    .fill('none')
    .stroke({ width: 2, color: '#00f' });
  • Пара (70, 100) — первый контрольный узел.
  • Пара (150, 100) — второй контрольный узел.
  • (170, 200) — конечная точка кривой.

Квадратичные кривые более просты и используют один контрольный узел:

draw.path('M50 250 Q 100 150, 150 250')
    .fill('none')
    .stroke({ width: 2, color: '#f60' });

Использование дуг и сложных форм

Дуги задаются с помощью команды A:

draw.path('M200 200 A50 50 0 0 1 300 200')
    .fill('none')
    .stroke({ width: 2, color: '#0ff' });

Параметры дуги:

  • rx ry — радиусы по осям X и Y.
  • x-axis-rotation — угол вращения дуги.
  • large-arc-flag — 0 или 1, указывающий на “большую” или “малую” дугу.
  • sweep-flag — направление дуги.
  • x y — конечная точка дуги.

Комбинирование команд для сложных фигур

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

const heartPath = draw.path([
  ['M', 100, 200],
  ['C', 100, 100, 200, 100, 200, 200],
  ['C', 200, 300, 100, 350, 100, 400],
  ['Z']
]).fill('red').stroke({ width: 2, color: '#900' });

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

Интерактивное изменение путей

SVG.js позволяет делать пути интерактивными. Например, анимация изменения формы через animate():

const animPath = draw.path('M50 50 L150 50 L150 150 L50 150 Z').fill('none').stroke({ width: 3 });
animPath.animate(1000).plot([['M', 50, 50], ['L', 200, 50], ['L', 200, 200], ['L', 50, 200], ['Z']]);

Так можно создавать переходы между формами, morphing эффект и динамическое построение графики на странице.

Оптимизация и удобство

  • Хранение команд пути в массиве облегчает генерацию и модификацию.
  • Для сложных форм лучше использовать методы plot() и массивы команд, чем создавать отдельные линии и кривые.
  • Использование относительных координат упрощает масштабирование и перемещение фигуры.
  • Комбинация animate() и plot() даёт возможность создавать плавные интерактивные визуализации без сложных библиотек.

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

Оглавление