W3docs
ru
Войти

SVG Path

Изучите элемент SVG <path> и команды атрибута d: moveto, lineto, кривые Безье, дуги и closepath, с примерами.

Элемент SVG <path> — самая мощная и гибкая фигура в SVG. Почти каждую другую SVG-фигуру — линии, многоугольники и кривые — можно воспроизвести с помощью <path>. На этой странице объясняется единственный атрибут, выполняющий всю работу — атрибут d, — а также рассматривается каждая поддерживаемая им команда рисования вместе с параметрами и рабочими примерами.

Описание элемента <path>

Элемент SVG <path> задаёт путь: последовательность команд рисования, которые перемещают воображаемое «перо» по холсту, чтобы рисовать линии, кривые и дуги.

Пути используются для создания сложных фигур путём объединения нескольких прямых или кривых сегментов. Сложные фигуры, состоящие только из прямых линий, можно также создавать как ломаные линии, но в отличие от ломаной линии, путь может рисовать настоящие кривые, поэтому ему не нужно множество крошечных отрезков для имитации кривой.

В SVG система координат начинается в верхнем левом углу: x увеличивается вправо, а y увеличивается вниз. Имейте это в виду — большее значение y означает ниже на экране, а не выше.

Форма пути полностью определяется атрибутом d («data», данные). Значение d — это строка из однобуквенных команд, после каждой из которых следуют числа (параметры), необходимые этой команде.

Команды атрибута d

Каждая команда — это одна буква, за которой следуют её параметры. Доступные команды:

КомандаНазваниеПараметры
M / mmovetox y
L / llinetox y
H / hhorizontal linetox
V / vvertical linetoy
C / ccubic Bézier curvetox1 y1 x2 y2 x y
S / ssmooth cubic Bézier curvetox2 y2 x y
Q / qquadratic Bézier curvetox1 y1 x y
T / tsmooth quadratic Bézier curvetox y
A / aelliptical arcrx ry x-axis-rotation large-arc-flag sweep-flag x y
Z / zclosepath(нет)

Абсолютные и относительные команды

Каждая команда существует в двух формах. Команды с заглавными буквами используют абсолютные координаты — каждое значение x y измеряется от начала координат SVG (0, 0) в верхнем левом углу. Команды со строчными буквами используют относительные координаты — каждое значение является смещением от текущей позиции пера (где закончилась предыдущая команда).

Оба пути ниже рисуют одинаковый треугольник. В первом используются абсолютные команды, во втором — относительные:

<!-- Absolute: every point measured from (0,0) -->
<path d="M 100 50 L 200 50 L 150 150 Z" fill="orange" />

<!-- Relative: every point is an offset from the previous point -->
<path d="M 100 50 l 100 0 l -50 100 Z" fill="orange" />

Читая относительный вариант: начать в (100, 50), затем сдвинуться на +100, 0 (до 200, 50), затем сдвинуться на -50, +100 (до 150, 150), затем z закрывает путь обратно к началу. Относительные команды удобны, когда нужно переместить всю фигуру — изменяется только первая M, а остальное следует за ней.

MoveTo, линии и закрытие (M, L, H, V, Z)

  • M x y поднимает перо и перемещает его в (x, y) без рисования. Каждый путь должен начинаться с moveto.
  • L x y рисует прямую линию от текущей точки до (x, y).
  • H x рисует горизонтальную линию до координаты x x (y остаётся неизменным). Краткая запись горизонтальной L.
  • V y рисует вертикальную линию до координаты y y (x остаётся неизменным).
  • Z закрывает путь, рисуя прямую линию обратно к последней точке M.
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="300" height="250">
      <path d="M190 40 L115 240 L265 240 Z" fill="lightblue" stroke="navy" />
      Sorry, inline SVG is not supported by your browser..
    </svg>
  </body>
</html>
Попробуйте сами »

Атрибут fill закрашивает внутреннюю часть фигуры, а stroke — контур. Другие параметры контура (ширина, пунктир, концы линий) см. в разделе SVG Stroking.

Кубические кривые Безье (C и S)

Кубическая кривая Безье изгибает сегмент с помощью двух контрольных точек. C x1 y1 x2 y2 x y рисует кривую от текущей точки до (x, y); (x1, y1) — контрольная точка для начала, а (x2, y2) — контрольная точка для конца. Кривая «притягивается» к каждой контрольной точке.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="300" height="200">
      <path d="M20 150 C20 20, 280 20, 280 150"
            fill="none" stroke="purple" stroke-width="3" />
      Sorry, inline SVG is not supported by your browser..
    </svg>
  </body>
</html>

Здесь перо начинает в (20, 150), а две контрольные точки (20, 20) и (280, 20) притягивают кривую вверх, образуя плавную арку, заканчивающуюся в (280, 150). Использование fill="none" оставляет кривую открытой, не закрашивая область под ней.

Вариант smooth S x2 y2 x y продолжает предыдущую кривую C (или S) плавно: у него только одна контрольная точка, потому что первая автоматически отражается от конечной контрольной точки предыдущей команды. Это позволяет легко соединять кривые в непрерывную волну.

Квадратичные кривые Безье (Q и T)

Квадратичная кривая Безье проще — она использует только одну контрольную точку. Q x1 y1 x y рисует кривую от текущей точки до (x, y), изгибающуюся к единственной контрольной точке (x1, y1).

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="300" height="200">
      <path d="M20 150 Q150 20 280 150"
            fill="none" stroke="green" stroke-width="3" />
      Sorry, inline SVG is not supported by your browser..
    </svg>
  </body>
</html>

Единственная контрольная точка (150, 20) расположена выше середины и притягивает линию в симметричный горб. Вариант smooth T x y продолжает предыдущую кривую Q/T, автоматически отражая её контрольную точку, поэтому нужно указывать только новую конечную точку.

Эллиптические дуги (A)

Команда arc рисует часть эллипса. Она принимает семь параметров:

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

  • rx, ry — горизонтальный и вертикальный радиусы эллипса.
  • x-axis-rotation — поворот эллипса в градусах.
  • large-arc-flag — 0 для меньшей дуги, 1 для большей дуги между двумя точками.
  • sweep-flag — 0 для дуги против часовой стрелки (отрицательный угол), 1 для дуги по часовой стрелке (положительный угол).
  • x, y — конечная точка дуги.

Поскольку две точки на эллипсе можно соединить четырьмя возможными дугами, два флага определяют, какая из них будет нарисована.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="320" height="200">
      <!-- Same start and end point, different flag combinations -->
      <path d="M60 150 A60 60 0 0 1 180 150"
            fill="none" stroke="crimson" stroke-width="3" />
      <path d="M60 150 A60 60 0 1 0 180 150"
            fill="none" stroke="teal" stroke-width="3" />
      Sorry, inline SVG is not supported by your browser..
    </svg>
  </body>
</html>

Обе дуги имеют одинаковые радиусы (60 60) и одинаковые начальную (60, 150) и конечную (180, 150) точки. Малиновый путь использует large-arc-flag 0, sweep-flag 1 для рисования короткой дуги над линией; бирюзовый путь использует large-arc-flag 1, sweep-flag 0 для рисования большой дуги в обратную сторону. Изменение флагов — самый простой способ понять поведение команды A.

Советы

  • Путь всегда начинается с moveto. Без открывающей M/m путь ничего не отображает.
  • Числа можно разделять пробелами или запятыми — L 100 50 и L100,50 равнозначны.
  • Повторяющиеся одинаковые команды можно опускать: M10 10 L20 20 L30 30 можно записать как M10 10 L20 20 30 30.
  • Ручное написание сложных путей чревато ошибками; векторный редактор с экспортом в SVG, как правило, предпочтительнее, но понимание команд позволяет читать и исправлять результат.

Связанные страницы

  • SVG Reference — краткий список всех SVG-элементов и атрибутов.
  • SVG Stroking — управление шириной, цветом и пунктиром контуров.
  • SVG Line — рисование одного прямого линейного элемента.
  • SVG Polygon — рисование замкнутых фигур из списка точек.

Практика

Практика
Какие из следующих являются допустимыми командами атрибута 'd' пути SVG?
Какие из следующих являются допустимыми командами атрибута 'd' пути SVG?
Was this page helpful?