Синтаксис path

В Snap.svg элемент <path> используется для создания сложных графических фигур, линий и кривых с помощью последовательности команд, задающих путь. Путь определяется атрибутом d, который содержит строку команд, каждая из которых указывает движение пера по координатной сетке.

Команды Path

Команды бывают абсолютными и относительными.

  • Абсолютные (заглавные буквы) используют координаты относительно начала SVG-контейнера.
  • Относительные (строчные буквы) задают координаты относительно текущей позиции пера.

Основные команды:

Команда Описание Пример
M x y Переместить перо в точку (x, y) M100 100
L x y Провести линию к точке (x, y) L200 200
H x Горизонтальная линия до x H300
V y Вертикальная линия до y V150
C x1 y1 x2 y2 x y Кубическая кривая Безье к (x,y) с контрольными точками (x1,y1) и (x2,y2) C100 100 150 150 200 100
S x2 y2 x y Продолжение кубической кривой Безье S250 50 300 100
Q x1 y1 x y Квадратичная кривая Безье к (x,y) с контрольной точкой (x1,y1) Q150 150 200 100
T x y Продолжение квадратичной кривой T250 50
A rx ry xAxisRotation largeArcFlag sweepFlag x y Дуга эллипса A50 50 0 0 1 200 200
Z Закрыть путь, соединив последнюю точку с первой Z

Создание path в Snap.svg

Для создания элемента path используется метод paper.path(), где paper — объект Snap:

var s = Snap(500, 500);  // создаём SVG контейнер 500x500
var path = s.path("M50 50 L150 50 L100 150 Z");
path.attr({
    fill: "#f06",
    stroke: "#000",
    strokeWidth: 2
});

В этом примере:

  • M50 50 – начальная точка.
  • L150 50 и L100 150 – линии к новым координатам.
  • Z – закрытие контура.

Комбинирование команд

Путь может содержать несколько команд подряд:

var complexPath = s.path("M100 100 C150 50 200 150 250 100 S350 50 400 100");
complexPath.attr({
    fill: "none",
    stroke: "#00f",
    strokeWidth: 3
});
  • C создаёт кубическую кривую.
  • S продолжает кривую без указания первой контрольной точки, используя отражение предыдущей.

Относительные координаты

Использование строчных команд уменьшает объём кода и облегчает масштабирование:

var relativePath = s.path("m50 50 l100 0 l-50 100 z");
relativePath.attr({
    fill: "#0f0",
    stroke: "#000",
    strokeWidth: 2
});
  • m50 50 – перемещение относительно текущей позиции.
  • l100 0 – линия на 100 пикселей вправо.
  • l-50 100 – линия 50 пикселей влево и 100 вниз.

Анимация path

Snap.svg позволяет плавно изменять путь с помощью метода animate():

var animPath = s.path("M50 250 C150 200 250 300 350 250");
animPath.attr({
    fill: "none",
    stroke: "#f00",
    strokeWidth: 4
});

animPath.animate({ d: "M50 250 C150 300 250 200 350 250" }, 2000, mina.easeinout);
  • Изменяется атрибут d.
  • Появляется эффект плавного деформирования кривой.
  • mina.easeinout задаёт тип ускорения анимации.

Полезные методы для path

Snap.svg предоставляет методы для работы с path:

  • getTotalLength() – длина пути.
  • getPointAtLength(len) – координаты точки на пути по длине.
  • getSubpath(from, to) – вырезает участок пути.

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

var p = s.path("M0 0 L200 200");
var len = p.getTotalLength();
var point = p.getPointAtLength(len / 2); // точка на середине линии
console.log(point.x, point.y);

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

Путь можно трансформировать методами:

  • translate(dx, dy) – перемещение.
  • scale(sx, sy, cx, cy) – масштабирование относительно точки (cx, cy).
  • rotate(angle, cx, cy) – поворот вокруг точки.

Пример:

var p = s.path("M50 50 L150 50 L100 150 Z");
p.transform("translate(50,50) scale(1.5) rotate(30 100 100)");

Советы по построению path

  • Использовать относительные команды для сложных повторяющихся форм.
  • Комбинировать кубические и квадратичные кривые для плавных изгибов.
  • Закрывать контуры Z, чтобы корректно применять заливку.
  • Для анимаций path заранее рассчитывать контрольные точки, чтобы движение выглядело естественно.

Синтаксис path является мощным инструментом Snap.svg, позволяя создавать как простые линии, так и сложные органические формы с плавными кривыми и динамическими анимациями.

Оглавление