Синтаксис path-команд

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

Типы команд и их синтаксис

Команды делятся на две категории: абсолютные (с заглавной буквы) и относительные (с маленькой буквы). Абсолютные команды задают точки относительно начала координат (0,0), относительные — относительно последней позиции пера.

Команда Назначение Пример использования
M / m MoveTo — перемещение пера без рисования M100,100
L / l LineTo — линия к указанной точке L200,200
H / h Horizontal LineTo — горизонтальная линия H300
V / v Vertical LineTo — вертикальная линия V150
C / c Cubic Bezier — кубическая кривая Безье C100,100 200,200 300,100
S / s Smooth Cubic Bezier — сглаженная кубическая кривая S250,50 300,100
Q / q Quadratic Bezier — квадратичная кривая Q150,50 200,100
T / t Smooth Quadratic Bezier — сглаженная квадратичная кривая T250,150
A / a Arc — дуга окружности A50,50 0 0,1 150,150
Z / z ClosePath — закрыть путь, соединяя последнюю точку с начальной Z

Примеры построения линий и кривых

Простая линия

const draw = SVG().addTo('body').size(400, 400);
const path = draw.path('M50,50 L150,150');
path.fill('none').stroke({ color: '#f06', width: 2 });
  • M50,50 — перемещает перо в точку (50,50)
  • L150,150 — рисует линию до точки (150,150)
  • fill('none') делает заливку прозрачной
  • stroke задает цвет и ширину линии

Кривые Безье

const curve = draw.path('M50,200 C100,100 200,300 250,200');
curve.fill('none').stroke({ color: '#0f6', width: 3 });
  • C100,100 200,300 250,200 — три точки управления: две контрольные и конечная точка
  • Объект path позволяет затем динамически изменять эти точки через методы plot и array

Работа с массивом координат

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

const points = [
  ['M', 50, 50],
  ['L', 150, 50],
  ['L', 150, 150],
  ['Z']
];
draw.path(points).fill('none').stroke({ color: '#06f', width: 2 });
  • Каждая подмассив содержит команду и необходимые параметры
  • Позволяет легко генерировать путь динамически

Методы редактирования пути

  1. plot() — полностью заменяет данные пути:
path.plot('M0,0 L100,0 L100,100 Z');
  1. array() — возвращает путь как массив команд для анализа или модификации:
const arr = path.array();
arr[1] = ['L', 200, 200];
path.plot(arr);
  1. move() и size() — перемещение и масштабирование всего пути без изменения отдельных команд:
path.move(50, 50).size(200, 200);

Сглаживание и сглаженные кривые

Команды S и T используют предыдущие кривые для автоматического вычисления контрольной точки, что упрощает построение плавных форм:

const smooth = draw.path('M50,200 C100,100 200,300 250,200 S400,100 450,200');
smooth.fill('none').stroke({ color: '#f60', width: 2 });
  • S принимает только контрольную точку и конечную точку
  • Первая контрольная точка вычисляется как отражение предыдущей относительно последней позиции

Дуги (Arc)

Команда A описывает сегмент окружности или эллипса:

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

Параметры:

  1. rx, ry — радиусы по осям x и y
  2. x-axis-rotation — угол поворота дуги
  3. large-arc-flag — 0 или 1 (выбор большой/малой дуги)
  4. sweep-flag — направление рисования (по часовой стрелке/против)
  5. x, y — конечная точка дуги

Советы по оптимизации path

  • Использовать относительные команды (l, c, q) для уменьшения размера кода при множественных сегментах
  • Разбивать сложные пути на несколько объектов path для удобства анимации
  • Для динамических форм удобно работать через массив команд вместо строкового d

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

Оглавление