Jag tycker att 98% av all SVG-användning kommer från förinställda SVG-filer eller vektorkonst i någon designprogramvara som jag slutligen exporterar som SVG. Inte super ofta handmanipulerar jag koordinaterna för saker i SVG-koden. Hej, jag har till och med en bok om allt detta.
Men då och då är det lämpligt och kanske till och med lite kul. I det här fallet ville jag rita en ganska specifik linje med ett par mjuka svängar i. Med lite kunskap om SVGs vägssyntax (den konstigaste, men mest kraftfulla av SVG: s ritverktyg) kan vi få det gjort utan mycket krångel.
Demo vi spelade med i video:
Se Pen
KOvPaa av Chris Coyier (@chriscoyier)
på CodePen.
Ursprunglig idé:
Se Pen
Lighted Path av Chris Coyier (@chriscoyier)
på CodePen.
Kom ihåg att det vi inte gjorde är att justera SVG så att de rundade hörnen stannade i ett snyggt bildförhållande medan resten av SVG var flexibel och kunde fylla vertikalt och horisontellt utrymme. Det är möjligt, det är bara mer komplicerat och vi måste täcka det en annan gång.