Откривам, че 98% от цялото ми използване на SVG идва от предварително създадени SVG файлове или векторни изображения в някакъв софтуер за проектиране, който в крайна сметка изнасям като SVG. Не супер често манипулирам ръчно координатите на нещата в SVG кода. Хей, дори имам книга за всичко това.
Но от време на време е подходящо и може би дори малко забавно. В този случай исках да нарисувам доста специфична линия с няколко меки завоя в нея. С малко познаване на синтаксиса на пътя на SVG (най-странния, но най-мощният от инструментите за чертане на SVG) можем да го направим без много шум.
Демо, с което играхме във видео:
Вижте писалката
KOvPaa от Chris Coyier (@chriscoyier)
на CodePen.
Оригинална идея:
Вижте Pen
Lighted Path от Chris Coyier (@chriscoyier)
на CodePen.
Не забравяйте, че това, което не свършихме, е да настроим SVG така, че заоблените ъгли да останат в хубаво съотношение, докато останалата част от SVG беше гъвкава и можеше да запълни вертикално и хоризонтално пространство. Това е възможно, просто е по-сложно и ще трябва да го покрием друг път.