Как правильно написать формулу path

#html #svg

Встречаются разные формы записи , например:






    


Возникают вопросы :

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

Ответы

Ответ 1

Все приведенные в вопросе формы записи path правильные,- как вам удобно, так и пишите,
соблюдая основное правило - положительные числа координат в формуле патча должны быть
разделены пробелами или запятыми, или буквами команд патча.

Буквенные команды формулы патча

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

M – (moveto x,y)   – переместить указатель в точку с абсолютными координатами (x,y)
 Эти координаты считаются началом пути.     

m – (relative) - относительное начало пути применяется для сложных, пересекающихся
или параллельных путей. Другими словами, когда в одном патче несколько подпатчей. 

L - (lineto) нарисовать линию от текущей точки к указанной с абсолютными координатами
(x,y) Эту команду можно не указывать, заменив её пробелом между соседними группами
координат.
z - замыкание контура. Патч будет замкнут, если координаты конечной и начальной точки
пути будут совпадать. Можно не указывать координаты конечной точки и путь будет замкнут,
если после координат предпоследней точки будет написана команда -z  

Ниже пример кода и поясняющей графики: 








 

Красная точка - это начальная точка path - M 10 210

 


M 10 210 – перемещаем перо в начальную точку точку х=”10″, y=”210″`
L 110 10 – рисуем линию до точки х=”110″, y=”10″
L 210 210 – рисуем линию до точки х=”210″, y=”210″   
замыкаем контур – “z”      


 Горизонтальные  (H,h) и вертикальные (V,v) линии

H (horizontal lineto) - эта команда для рисования горизонтальных линий, последующие
две цифры указывают горизонтальные координаты начала и конца линии. 

V (vertical lineto) -  команда для рисования вертикальных линий, последующие две
цифры указывают вертикальные координаты начала и конца линии. 

Пример       

Рисуем вертикальную линию из точки M 110 210 в точку V 110 10.      

   



В формуле патча обязательно должны быть указаны координаты начальной точки M 110
210 или другой точки из которой будет нарисована вертикальная линия.  

Пример совместного использования вертикальных и горизонтальных линий.  

Допустим нужно нарисовать ступеньки:








   

Использование вертикальных и горизонтальных линий с абсолютными координатами, как
в примере выше, заметно увеличивает код. При использовании относительных координат
код становится намного короче, так как задается только относительная длина h от последней
точки пути для горизонтальных линий и высота v для вертикальных линий. Сам процесс
рисования становится проще, так как не нужно высчитывать абсолютные расстояния от начала
координат.
 Для сравнения,- ниже код рисует те же ступеньки с использованием относительных величин
h и v .   

Пример рисования с помощью относительных величин h и v  






    

Так как начало координат (0,0) полотна SVG находится в левом верхнем углу, то положительное
направление оси “X” будет вправо, а оси “Y” – вниз. Поэтому команда v -50 соответствует
перемещению вверх на 50px от текущей точки по вертикали, а команда h -60 влево на 60px
по горизонтали.  

Более подробно здесь и здесь

Сокращенная формула записи патча        

Можно еще сократить код, убрав пробелы, между командами и цифрами. Для разделения
положительных чисел применяется запятая.