Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Элемент <path> – наиболее мощный элемент в библиотеке основных форм SVG. Его можно использовать для создания всех других основных форм и другого.

Пути создают сложные формы, объединяющие многочисленные прямые и кривые линии. Сложные формы, образованные только прямыми линиями могут быть созданы как polylines. Хотя элементы polyline и paths могут создавать формы, выглядящие одинаково, polyline необходимо много маленьких прямых линий для отображения кривых, и этот элемент не очень хорошо масштабируется до больших размеров. Хорошее понимание paths важно при рисовании SVG. При создании сложных paths не рекомендуется использовать XML или текстовые редакторы – понимание, как они работают, позволит понять и исправить проблемы с отображением SVG.

Форма элемента path определяется одним атрибутом: d (смотри подробности в основные формы). Атрибут d содержит серию команд и параметров, используемых этими командами. Мы опишем доступные команды и покажем примеры того, что они делают.

Каждая команда обозначается специальной буквой. Давайте переместимся в точку (10,10) – x и y координаты соответственно. Команда "Передвинуть к" обозначается буквой M. Когда синтаксический анализатор наталкивается на эту команду, он знает, что необходимо переместиться к указанной точке. Поэтому для перемещения к точке (10,10) следует использовать команду "M 10 10". После этого, синтаксический анализатор начинает читать следующую команду.

Все команды существуют в двух вариантах: команда с заглавной буквы обозначает абсолютные координаты на странице, а команда с буквой нижнего регистра обозначает относительные координаты (например, передвижение от последней точки на 10px вверх и 7px влево).

Координаты в атрибуте d всегда пишутся без указания единиц измерения и находятся в системе пользовательских координат (обычно это пиксели). Позже мы узнаем, как элемент paths может быть трансформирован для удовлетворения других нужд.

Команды линии

Существуют пять команд линии для узлов <path>. Как следует из имени каждая просто рисует прямую линию между двумя точками. Первая команда это "Передвинуть к", M, которая описана выше. Она принимает два параметра, координату x и координату y для передвижения. Если курсор уже был где-либо на странице, линия не рисуется для соединения двух мест. Команда "Передвинуть к" появляется в начале путей для определения, где рисование следует начать.

M x y

или

m dx dy

В следующем примере у нас есть только точка (10,10). Хотя, необходимо отметить, что она не была бы чётко видна, если ты бы ты просто рисовал путь нормальным способом.

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">

  <path d="M10 10"/>

  <!-- Точки -->
  <circle cx="10" cy="10" r="2" fill="red"/>

</svg>

Существуют три команды, которые рисуют линии. Наиболее обычная это команда "линия к" L. Эта команда использует два параметра - координаты x и y - и рисует линию от текущего положения к новому положению.

 L x y (или l dx dy)

Существуют две укороченные формы для рисования горизонтальных и вертикальных линий. H рисует горизонтальную линию, а V рисует вертикальную линию. Обе команды используют только один аргумент, так как они движутся только в одном направлении.

 H x (или h dx)
 V y (или v dy)

Поэтому теперь мы знаем достаточно команд, чтобы начать что-либо рисовать. Простое место для начала  - это просто рисунок плоского прямоугольника (фигуру подобного типа можно нарисовать более легким способом с использованием элемента <rect>). Он состоит только из горизонтальных и вертикальных линий:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  
  <path d="M10 10 H 90 V 90 H 10 L 10 10"/>

  <!-- Точки -->
  <circle cx="10" cy="10" r="2" fill="red"/>
  <circle cx="90" cy="90" r="2" fill="red"/>
  <circle cx="90" cy="10" r="2" fill="red"/>
  <circle cx="10" cy="90" r="2" fill="red"/>

</svg>

Наконец, мы можем немного укоротить вышеуказанную запись элемента path использованием команды "Закрыть путь", Z. Эта команда рисует прямую линию от текущего положения назад до первой точки, от которой начинался путь. Она часто помещается в конце узла пути, хотя нет необходимости закрывать путь все время. Очевидно не существует разницы между использованием верхнего и нижнего регистра буквы команды.

 Z (или z)

Поэтому наш путь, указанный выше, мог бы быть сокращен до:

 <path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/>

Можно также использовать относительную форму этих команд, чтобы нарисовать такую же картинку. Как было отмечено ранее, относительные команды вызываются использованием букв нижнего регистра, и скорее чем двигая курсор к определенной координате, они двигают его относительно его последнего положения. Например, поскольку 80 x 80, элемент путь мог бы быть записан:

 <path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/>

Путь будет двигаться к точке (10,10) и затем двигаться горизонтально 80 точек вправо, затем 80 точек вниз, затем 80 точек влево, и затем назад к старту.

Возможно, в этих примерах было бы проще использовать элементы <polygon> или <polyline>. Однако, пути используются при рисовании SVG настолько часто, что многим разработчикам может быть удобнее использовать их вместо других элементов.  Нет никакой разницы в производительности при использовании того или другого.

Команды кривых линий

Существует три различных команды, которые вы можете использовать для создания плавных кривых линий. Две из этих кривых - кривые Безье, а третья - "дуга" или часть окружности. Вы возможно уже имели практический опыт с кривыми Безье, используя инструменты для создания paths(путей) в lnkscape, Illustrator или Photoshop. Для полного описания математических понятий о кривых Безье, попробуйте пройти по ссылке на Wikipedia. Информации о кривых Безье слишком много, чтобы попытаться охватить ее здесь. Существует бесчисленное множество различных типов кривых Безье, но только две простые доступны для элементов путей: кубическая, C, и квадратная, Q.

Кривые Безье

Кубическая кривая, C, представляет собой немного более сложную кривую. Кубическая Безье принимает две контрольные точки для каждой точки.  Таким образом, чтобы создать кубическую кривую Безье, вам необходимо указать три набора координат.

 C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)

Последний набор координат (x,y) это точка, в которой заканчивается линия. Две другие - контрольные точки. (x1,y1) контрольная точка для начала вашей кривой, а (x2,y2) для конца вашей кривой. Если вы знакомы с вычислительной алгеброй, контрольные точки в описывают наклон вашей линии в каждой точке. Функция Безье создает плавную кривую, которая ведет от наклона, который вы установили в начале вашей линии к наклону на другом конце.

Cubic Bézier Curves with grid

<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">

  <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
  <path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/>
  <path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/>
  <path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/>
  <path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/>
  <path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/>
  <path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/>
  <path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/>
  <path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/>

</svg>

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

Вы можете связать вместе несколько кривых Безье, чтобы создавать более длинные плавные формы. В таком случае часто контрольные точки на разных сторонах будут отображением друг друга (чтобы поддерживать постоянный наклон). В этом случае можно использовать сокращенную запись для кривой Безье, используя команду S (или s).

 S x2 y2, x y (or s dx2 dy2, dx dy)

Команда S задаёт тот же тип кривой, что и был, но если он следует за другой S или C командой, подразумевается, что первая контрольная точка - отражение той, что использовалась перед этим. Если команда S не следует за другой командой S или C, то подразумевается, что обе контрольные точки для кривой одинаковы. Пример синтаксиса показан ниже. В фигуре слева контрольные точки показаны красным, а подразумеваемая контрольная точка - синим.

ShortCut_Cubic_Bezier_with_grid.png

<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
</svg>

Другой тип кривой Безье - квадратичная кривая, задаётся командой Q. Квадратичная кривая проще, чем кубическая: для неё требуется только одна контрольная точка, которая определяет наклон кривой как в начальной, так и в конечной точке. Она принимает два аргумента: контрольную точку и конец кривой.

 Q x1 y1, x y (or q dx1 dy1, dx dy)

Quadratic Bézier with grid

<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>
</svg>

Как и в случае кубической кривой Безье, существует сокращение для соединения нескольких квадратичных кривых Безье -T.

 T x y (or t dx dy)

Как и ранее, сокращение смотрит на предыдущую контрольную точку, которую вы использовали, и выводит из нее новую. Это означает, что после первой контрольной точки вы можете делать довольно сложные фигуры, указав только конечные точки. Обратите внимание, что это работает только в том случае, если предыдущей командой была команда Q или T. Если это не так, то контрольная точка считается той же, что и предыдущая, и вы нарисуете только линии.

Shortcut_Quadratic_Bezier_with_grid.png

<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>
</svg>

Обе кривые дают похожие результаты, но кубическая кривая позволяет больше свободы в том, как должна выглядеть кривая. Решение, какую кривую использовать - ситуационное и зависит от количества симметрии в линиях.

Дуги

Другой тип кривых линий, которые можно создать с помощью SVG - дуга (команда A). Дуги - секции кругов или эллипсов. При заданных x- и y-радиусах есть два эллипса, которые могут соединяться любыми двумя точками (пока они находятся внутри радиуса круга). Вдоль любого из этих кругов есть два пути, которые могут испольовать для соединения точек, так что в любой ситуации возможно 4 дуги.

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

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

Третий параметр описывает поворот дуги. См. пример ниже

SVGArcs_XAxisRotation_with_grid

<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 315
           L 110 215
           A 30 50 0 0 1 162.55 162.45
           L 172.55 152.45
           A 30 50 -45 0 1 215.1 109.9
           L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
</svg>

Пример показывает элемент path, который проходит по странице диагонально. В центре этого элемента вырезаны две эллиптические дуги (радиус x = 30, радиус y = 50). В первой дуге параметр x-asix-rotation = 0, а это означает, что эллипс, по которому проходит дуга (показан серым) расположен вертикально. Во второй дуге параметр x-asix-rotation = -45. Это поворачивает эллипс так, что направление его малой оси совпадает с направлением пути, как это видно на рисунке выше.

Четыре разных пути, упомянутых выше определяются с помощью двух аргументов-флагов. Как упоминалось ранее, есть ещё два возможных эллипса для обхода пути и два разных возможных пути на обоих эллипсах, что даёт четыре возможных пути. Первый аргумент - large-arc-flag. Он определяет, должна ли дуга быть больше или меньше 180 градусов. В конечном счёте этот флаг определяет, в каком направлении дуга будет обходить данный круг. Второй аргумент - sweep-flag. Он определяет, должна дуга двигаться по отрицательным углам или по положительным, т.е. по сути определяет по какому из двух кругов она будет идти. Пример ниже показывает все четыре возможные комбинации.

<svg width="325" height="325" xmlns="http://www.w3.org/2000/svg">
  <path d="M80 80
           A 45 45, 0, 0, 0, 125 125
           L 125 80 Z" fill="green"/>
  <path d="M230 80
           A 45 45, 0, 1, 0, 275 125
           L 275 80 Z" fill="red"/>
  <path d="M80 230
           A 45 45, 0, 0, 1, 125 275
           L 125 230 Z" fill="purple"/>
  <path d="M230 230
           A 45 45, 0, 1, 1, 275 275
           L 275 230 Z" fill="blue"/>
</svg>

Последние два аргумента, если вы ещё не догадались, обозначают координаты x и y, где заканчивается дуга. Дуги - лёгкий способ создавать части кругов или эллипсов в ваших рисунках. Например, круговая диаграмма требует отдельную дугу для каждого куска диаграммы.

Если вы переходите в SVG из Canvas`а, дуги могут быть самой трудной вещью для изучения, но они также очень мощные. Т.к. начальная и конечные точки для любого пути, обходящего круг, одно и то же место, существует бесконечное количество кругов, которые могут быть выбраны и действительный путь не определен. Возможно приблизить их, сделав начальную и конечную точку пути слегка разными и соединив их с другими сегментами пути. В этой точке, часто проще использовать настоящий круг или эллипс. Это интерактивное демо может помочь понять основные принципы SVG-дуг: http://codepen.io/lingtalfi/pen/yaLWJG (протестировано только в Хром и Файрфокс, может не работать в вашем браузере)

Метки документа и участники

 Внесли вклад в эту страницу: komuroe, tavira, sonnenhaft, reflash, riseremi, mboris1, scaint
 Обновлялась последний раз: komuroe,