path: root/files/ru/web/svg/tutorial/paths/index.html

---
title: Пути (paths)
slug: Web/SVG/Tutorial/Paths
translation_of: Web/SVG/Tutorial/Paths
---
<p>{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}</p>

<p>Элемент <a href="/en-US/Web/SVG/Element/path"><code>&lt;path&gt;</code></a> ("путь")– наиболее мощный элемент в библиотеке <a href="/en-US/docs/Web/SVG/Tutorial/Basic_Shapes">основных форм</a> SVG. С его помощью можно создавать отрезки, кривые, дуги и многое другое.</p>

<p>С помощью элементов <code><a href="/en-US/Web/SVG/Element/path">&lt;path&gt;</a></code> создают сложные формы, объединяя многочисленные прямые и кривые линии. Сложные формы из одних только прямых линий можно создавать и через элемент <code><a href="/en-US/docs/">polyline</a></code>. Хотя результаты работы обоих элементов могут быть похожи, элемент <code>polyline </code>отображает кривые как много маленьких прямых линий, что не очень хорошо масштабируется до больших размеров. Хорошее понимание path важно при рисовании SVG. При создании сложных paths не рекомендуется использовать XML или текстовые редакторы – понимание, как они работают, позволит установить и исправить проблемы с отображением SVG.</p>

<p>Форма элемента path определяется одним атрибутом: {{ SVGAttr("d") }} (смотри подробности в <a href="/en-US/docs/">основные формы</a>). Атрибут <code>d</code> содержит серию команд и параметров, используемых этими командами. Мы опишем доступные команды и покажем примеры того, что они делают.</p>

<p>Каждая команда обозначается специальной буквой. Например, нам надо переместиться в точку с координатами (10,10).  Команда "Передвинуть к" вызывается буквой M. Когда синтаксический анализатор наталкивается на эту команду, он знает, что необходимо переместиться к указанной точке. Итак, для перемещения к точке (10,10) используется команда "M 10 10", и далее синтаксический анализатор переходит к следующей команде.</p>

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

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

<h2 id="Команды_линии">Команды линии</h2>

<p>Существуют пять команд линии для узлов <code>&lt;path&gt;</code>.  Первая команда - это "Переместиться к", или M, описанная выше. В качестве параметров она принимает координаты точки, к которой перемещается. Если курсор уже был где-либо на странице, между старым и новым местом линия не появится. Команда "Переместиться к" используется в начале элемента <code>&lt;path&gt;</code> для указания точки, откуда начнется рисование, например:</p>

<pre>M x y
</pre>

<p>или</p>

<pre>m dx dy</pre>

<p>Следующий пример рисует одну только точку (10,10). Заметьте, однако, что при обычном использовании <code>&lt;path&gt;</code> она вообще не была бы видна.</p>

<p><img alt="" class="internal" src="/@api/deki/files/45/=Blank_Path_Area.png" style="float: right;"></p>

<pre class="brush: xml">&lt;svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"&gt;

  &lt;path d="M10 10"/&gt;

  &lt;!-- Точки --&gt;
  &lt;circle cx="10" cy="10" r="2" fill="red"/&gt;

&lt;/svg&gt;</pre>

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

<pre> L x y (или l dx dy)
</pre>

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

<pre> H x (или h dx)
 V y (или v dy)
</pre>

<p>Начнем с рисования простой формы, например, прямоугольника (такого же, какой проще нарисовать с помощью элемента <code>&lt;rect&gt;</code>). Он состоит только из горизонтальных и вертикальных линий<span style="line-height: 1.5;">:</span></p>

<p><img alt="" class="internal" src="/@api/deki/files/292/=Path_Line_Commands.png" style="float: right;"></p>

<pre class="brush: xml">&lt;svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"&gt;

  &lt;path d="M10 10 H 90 V 90 H 10 L 10 10"/&gt;

  &lt;!-- Точки --&gt;
  &lt;circle cx="10" cy="10" r="2" fill="red"/&gt;
  &lt;circle cx="90" cy="90" r="2" fill="red"/&gt;
  &lt;circle cx="90" cy="10" r="2" fill="red"/&gt;
  &lt;circle cx="10" cy="90" r="2" fill="red"/&gt;

&lt;/svg&gt;</pre>

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

<pre> Z (или z)
</pre>

<p>Таким образом наш путь из примера можно сократить до:</p>

<pre class="brush: xml"> &lt;path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/&gt;
</pre>

<p>Точно такую же картину можно получить с помощью относительных форм этих команд. Как уже говорилось, относительные команды вызываются использованием букв нижнего регистра и перемещают курсор относительно его последнего положения, а не к точным координатам . В нашем примере, поскольку размеры нашего квадрата - 80 x 80, элемент <code>&lt;path&gt;</code> можно записать так:</p>

<pre class="brush: xml"> &lt;path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/&gt;
</pre>

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

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

<h2 id="Команды_кривых_линий">Команды кривых линий</h2>

<p>Существует три различных команды, которые вы можете использовать для создания плавных кривых линий. Две из этих кривых - кривые Безье, а третья - "дуга", или часть окружности. Вы, возможно, уже имели практический опыт с кривыми Безье, если работали с путями (paths) в программах lnkscape, Illustrator или Photoshop. Для полного описания математических понятий о кривых Безье, попробуйте пройти по ссылке на <a class="external" href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve">Wikipedia</a>. Информации о кривых Безье слишком много, чтобы попытаться охватить ее здесь. Существует бесчисленное множество различных типов кривых Безье, но только две простые доступны для элементов путей: кубическая, C, и квадратная, Q.</p>

<h3 id="Кривые_Безье">Кривые Безье</h3>

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

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

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

<p><img alt="Cubic Bézier Curves with grid" class="internal" src="https://mdn.mozillademos.org/files/10401/Cubic_Bezier_Curves_with_grid.png" style="float: right; height: 160px; width: 190px;"></p>

<pre class="brush: xml">&lt;svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"&gt;

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

&lt;/svg&gt;
</pre>

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

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

<pre> S x2 y2, x y (or s dx2 dy2, dx dy)
</pre>

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

<p><img alt="ShortCut_Cubic_Bezier_with_grid.png" class="internal" src="https://mdn.mozillademos.org/files/10405/ShortCut_Cubic_Bezier_with_grid.png" style="float: right; height: 160px; width: 190px;"></p>

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

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

<pre> Q x1 y1, x y (or q dx1 dy1, dx dy)
</pre>

<p><img alt="Quadratic Bézier with grid" class="internal" src="https://mdn.mozillademos.org/files/10403/Quadratic_Bezier_with_grid.png" style="float: right; height: 160px; width: 190px;"></p>

<pre class="brush: xml">&lt;svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/&gt;
&lt;/svg&gt;</pre>

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

<pre> T x y (or t dx dy)
</pre>

<p>Как и ранее, сокращение смотрит на предыдущую контрольную точку, которую вы использовали, и выводит из нее новую. Это означает, что после первой контрольной точки вы можете делать довольно сложные фигуры, указав только конечные точки.</p>

<div class="blockIndicator note">
<p>Обратите внимание, что это работает только в том случае, если предыдущей командой была команда Q или T. Если это не так, то контрольная точка считается той же, что и предыдущая, и вы нарисуете только линии.</p>
</div>

<p><img alt="Shortcut_Quadratic_Bezier_with_grid.png" class="internal" src="https://mdn.mozillademos.org/files/10407/Shortcut_Quadratic_Bezier_with_grid.png" style="float: right; height: 158px; width: 188px;"></p>

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

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

<h3 id="Arcs" name="Arcs">Дуги</h3>

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

<pre> 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
</pre>

<p>В начале элемент дуги принимает два аргумента радиусов. Если нужно, обратитесь к разделу <a href="https://developer.mozilla.org/en-US/Web/SVG/Element/ellipse">Эллипсы</a>, чтобы увидеть, как они работают. Последние два аргумента предназначены для обозначения координат окончания дуги. Вместе эти четыре значения определяют основную структуры дуги.</p>

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

<p><img alt="SVGArcs_XAxisRotation_with_grid" class="internal" src="https://mdn.mozillademos.org/files/10409/SVGArcs_XAxisRotation_with_grid.png" style="float: right; height: 201px; width: 200px;"></p>

<pre class="brush: xml">&lt;svg width="320" height="320" xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;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"/&gt;
&lt;/svg&gt;</pre>

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

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

<p><img alt="Show the 4 arcs on the Ellipse example" src="https://mdn.mozillademos.org/files/15822/SVGArcs_XAxisRotation_with_grid_ellipses.png"></p>

<pre class="brush: xml">&lt;svg xmlns="http://www.w3.org/2000/svg" width="320" height="320"&gt;
  &lt;path d="M 10 315
           L 110 215
           A 36 60 0 0 1 150.71 170.29
           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"/&gt;
  &lt;circle cx="150.71" cy="170.29" r="2" fill="red"/&gt;
  &lt;circle cx="110" cy="215" r="2" fill="red"/&gt;
  &lt;ellipse cx="144.931" cy="229.512" rx="36" ry="60" fill="transparent" stroke="blue"/&gt;
  &lt;ellipse cx="115.779" cy="155.778" rx="36" ry="60" fill="transparent" stroke="blue"/&gt;
&lt;/svg&gt;</pre>

<p>Заметьте, что каждый голубой эллипс сформирован двумя дугами, в зависимости от того движетесь ли вы по часовой или против часовой стрелке. Каждый эллипс имеет короткую и длинную дуги. Оба эллипса просто зеркальные отражения друг друга. Они отражены вдоль линии, сформированной start-&gt;end точками.</p>

<p>Если start-&gt;end точки расположены далеко и не попадают в пределы градусов эллипсов по x и y, то в этом случае радиусы эллипсов будут увеличены до величины, нужной чтобы достичь точек start-&gt;end. Интерактивный codepen внизу этой страницы наглядно это демонстрирует. Для определения достаточны ли велики радиусы ваших эллипсов чтобы требовать увеличения, вам нужно решить систему уравнений подобную <a href="https://www.wolframalpha.com/input/?i=solve+((110+-+x)%5E2%2F36%5E2)+%2B+((215+-+y)%5E2%2F60%5E2)+%3D+1,+((150.71+-+x)%5E2%2F36%5E2)+%2B+((170.29+-+y)%5E2%2F60%5E2)+%3D+1">этой на wolfram alpha</a>. Это вычисление для non-rotated эллипса с start-&gt;end (110, 215)-&gt;(150.71, 170.29). Решением, (x, y), является центр эллипса(ов). Следующее вычисление для non-rotated эллипса с start-&gt;end (110, 215)-&gt;(162.55, 162.45). Решение будет <a href="https://www.wolframalpha.com/input/?i=solve+((110+-+x)%5E2%2F30%5E2)+%2B+((215+-+y)%5E2%2F50%5E2)+%3D+1,+((162.55+-+x)%5E2%2F30%5E2)+%2B+((162.45+-+y)%5E2%2F50%5E2)+%3D+1">мнимым</a> если радиусы ваших эллипсов слишком малы. Решение содержит небольшой мнимый компонент потому, что эллипсы были лишь слегка расширены.</p>

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

<p><img alt="" class="internal" src="/@api/deki/files/345/=SVGArcs_Flags.png" style="float: right;"></p>

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

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

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

<p>{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}</p>