Ich finde, dass 98% meiner gesamten SVG-Nutzung aus vorgefertigten SVG-Dateien oder Vektorgrafiken in einer Design-Software stammt, die ich letztendlich als SVG exportiere. Nicht sehr oft manipuliere ich die Koordinaten der Dinge im SVG-Code von Hand. Hey, ich habe sogar ein Buch darüber.
Aber hin und wieder ist es angemessen und macht vielleicht sogar ein bisschen Spaß. In diesem Fall wollte ich eine ziemlich spezifische Linie mit ein paar weichen Kurven ziehen. Mit ein wenig Wissen über die Pfadsyntax von SVG (das seltsamste, aber leistungsstärkste Zeichenwerkzeug von SVG) können wir dies ohne großen Aufwand erledigen.
Demo, mit dem wir im Video gespielt haben:
Siehe den Pen
KOvPaa von Chris Coyier (@chriscoyier)
auf CodePen.
Originale Idee:
Sehen Sie den Pen
Lighted Path von Chris Coyier (@chriscoyier)
auf CodePen.
Denken Sie daran, dass wir das SVG nicht so angepasst haben, dass die abgerundeten Ecken in einem schönen Seitenverhältnis blieben, während der Rest des SVG flexibel war und vertikalen und horizontalen Raum ausfüllen konnte. Das ist möglich, es ist nur komplizierter und wir müssen es ein anderes Mal behandeln.