Mi može teći tekst uz zakrivljene linije tri alata ugrađenih izravno u SVG: , i .
Isječak
Dangerous Curves Ahead Kako smo došli tamo
Zamislite da u SVG-u nacrtamo zakrivljenu crtu i damo joj ID koji se zove curve.
Pogledajte Pen NgwPYB Geffa Grahama (@geoffgraham) na CodePenu.
Zatim ispuštamo sadržaj u SVG pomoću oznake i dajemo mu širinu koja odgovara viewBoxdimenzijama SVG-a . Još nećemo ništa vidjeti, ali znamo da je tekst negdje izvan zaslona.
Pogledajte Pen ZyaYOw Geffa Grahama (@geoffgraham) na CodePenu.
Zaista želimo vidjeti taj tekst. Svoj tekst možemo umotati u oznaku i postaviti ga tako da slijedi linije naše zakrivljene staze pozivanjem ID-a puta koji smo ranije postavili.
Pogledajte Pen Kqywpe Geffa Grahama (@geoffgraham) na CodePenu.
Sad kuhamo na plin!
Ne želimo da se ta krivulja vidi, pa dajmo stazi prozirno ispunjenje. To bismo mogli učiniti i u CSS-u, ali radi ovog primjera primjenjujemo ga izravno u SVG oznaci.
Pogledajte olovku xrPbgx Geoff Graham (@geoffgraham) na CodePen.
Ostalo je CSS! Točna veličina fonta ovisit će o samom tekstu i o tome koja se obitelj fontova koristi, ali kad uspostavite pravu ravnotežu, SVG će sam upravljati odzivom i osigurati da sve ostane na krivulji u bilo kojem mjerilu.
Pogledajte tekst SVG olovke duž zakrivljene staze, Geoff Graham (@geoffgraham) na CodePenu.
Ovu bismo istu metodu mogli primijeniti na bilo koju vrstu zakrivljene staze.
Pogledajte tekst SVG olovke duž zakrivljene staze, Geoff Graham (@geoffgraham) na CodePenu.