Vi kan flyte tekst langs en buet linje med tre verktøy innebygd i SVG: , og .
Utdraget
Dangerous Curves Ahead Hvordan vi kom dit
Tenk deg at vi tegner en buet linje i SVG og gir den en ID som heter curve.
Se pennen NgwPYB av Geoff Graham (@geoffgraham) på CodePen.
Deretter slipper vi innhold i SVG ved hjelp av taggen og gir den en bredde som samsvarer med SVG- viewBoxdimensjonene. Vi kommer ikke til å se noe ennå, men vi vet at teksten er der utenfor skjermen et sted.
Se Pen ZyaYOw av Geoff Graham (@geoffgraham) på CodePen.
Vi ønsker virkelig å se den teksten. Vi kan pakke inn teksten vår i koden og sette den til å følge linjene i den buede banen ved å ringe til sti-ID-en vi satte tidligere.
Se Pen Kqywpe av Geoff Graham (@geoffgraham) på CodePen.
Nå lager vi mat med gass!
Vi vil ikke at den kurven skal sees, så la oss gi banen en gjennomsiktig fylling. Vi kan også gjøre dette i CSS, men vi bruker det innebygd direkte i SVG-merkingen av hensyn til dette eksemplet.
Se pennen xrPbgx av Geoff Graham (@geoffgraham) på CodePen.
Resten er CSS! Den eksakte skriftstørrelsen vil avhenge av selve teksten og hvilken skriftfamilie som brukes, men når du når den rette balansen, vil SVG selv håndtere responsen og sørge for at alt forblir i kurven i hvilken som helst skala.
Se pennens SVG-tekst langs en buet sti av Geoff Graham (@geoffgraham) på CodePen.
Vi kan bruke den samme metoden på alle typer buede stier.
Se pennens SVG-tekst langs en buet sti av Geoff Graham (@geoffgraham) på CodePen.