Этот инструмент самый универсальный в формате SVG. С помощью него можно рисовать как закрытые фигуры, так и линии, причем все они имеют любой вид. Единственным ограничение - это использование координат без размерностей (чистых цифр).
Вся конструкция укладывается в последовательноть команд передаваемых в свойстве-аттрибуте тэга d. Команды представляют собой букву латиницы и, в зависимости от команды, набора значений, которые могут осутсвовать.
Команды позицируют положение текущего пера. Если в качестве команды используется прописная буква, то значения координат исчисляются абсолютно, относительно поле отрисовки. В противном случае команда заданая строчной буквой исчисляет новое положение пера относительно предедущего его поожения. Такое устройство команд кисти позволяет очень гибко его применять в различных вариантах его использования
При этом команды идут последовательно в общей строчке, давая таким образом возможность, созжавать последовательость и непрерывность или линии, или фигуры, или группы. При этом сами команды как бы наследуются из предедущей. Вот как к примеру описана эта линия
<path d="M10,10 l30,40 40 30" fill="transparent" stroke="blue" />
Перед тем как приступить к рассказу о командах заметим, что если поле fill указать как transparent или none, то это будет линия, Во всех других случаях это фигура с заливкой цветом внутрености path обрзованная конечными точками заданой последовательности. На рисунке та же последовательность, но fill задана желтым цветом. Видно, как синим цветом отрисовывается ломаная линия, а то что заливается желтым цветом не имет внешней границы связаной с заданвм фигурой цветом, а лишь представляет геометрию фигуры.
Команды <path>
Все команды делятся на две группы. Это команды линейного рисования и отрисовки по лекалам. К линейнам командам можно отнести и комады перемещения курсора без рисования, обычно с которой и начинается все наши приключения с кистью <path>
Линейные команды.
Итак первая команда - это перемещение курсора
M x y | m dx dy
Фактически любая последовательность начинается с этих команда. Они ни чего не рисуют, а лишь определяют положение пера начала любого объекта. Это видно на примере выше.
На этом примере рисуется что вроде сетки, но это исполнятся комбинацией последовательностей рисования и перемещения. Таким образом одной последовательностью можно создать достаточно сложную конструкцию, не прибегая к множеству кистей. Этим же способом можно создавать прерывистые фигуры и объекты
<path d="M20,10 v80 M60,10 v80 M10,20 h80 M10,60 h80" fill="none" stroke="blue" />
В этом примере мы знакомимся с двумя следующими командами. Это команды рисования вертикальной линии
V y | v dy
и рисования горизотальной линии
H x | h dx
А с командой любой линейной
L x y | l dx dy
мы уже знакомы по примеру с ломаной линией. Там же показан пример как используется команда для последующих точек, если она имеет имеет одинакковый вид,, то для следующих точек сама команда опускается. Этот прием используется для любой команды последовательности, а не только для линейных.
Заканчивая раздел мы командой рисовки с возвратом в начальную точку
Z | z
на уже знакомом примере, но с применением этой команды, мы видим замкнутый треугольник с заливкой. Конечно нарисовать треугольник можно и кистью полигон, но мы специально на примере показывает возможности имено этого способа. И последнее. Здесь или в любой другой последовательности разделительным символом может быть любой символ отличный от команды или числа, в том числе и перенос на другую строчку или страницу
<path d="M10,10 l30,40 40 30 z" fill="yellow" stroke="blue" />
