Vi kan flyde tekst langs en buet linje med tre værktøjer indbygget i SVG: , og .
Kodestykket
Dangerous Curves Ahead Hvordan vi kom derhen
Forestil dig, at vi tegner en buet linje i SVG og giver den et kaldet ID curve.
Se Pen NgwPYB af Geoff Graham (@geoffgraham) på CodePen.
Derefter slipper vi indhold i SVG ved hjælp af tagget og giver det en bredde, der svarer til SVG- viewBoxdimensionerne. Vi vil ikke se noget endnu, men vi ved, at teksten er der fra skærmen et eller andet sted.
Se Pen ZyaYOw af Geoff Graham (@geoffgraham) på CodePen.
Vi ønsker virkelig at se den tekst. Vi kan indpakke vores tekst i tagget og indstille det til at følge linjerne i vores buede sti ved at kalde det sti-id, vi har angivet tidligere.
Se Pen Kqywpe af Geoff Graham (@geoffgraham) på CodePen.
Nu laver vi mad med gas!
Vi ønsker ikke, at den kurve skal ses, så lad os give stien en gennemsigtig udfyldning. Vi kunne også gøre dette i CSS, men vi anvender det direkte i SVG-markeringen af hensyn til dette eksempel.
Se pennen xrPbgx af Geoff Graham (@geoffgraham) på CodePen.
Resten er CSS! Den nøjagtige skriftstørrelse afhænger af selve teksten, og hvilken skrifttypefamilie der bruges, men når du når den rette balance, vil SVG selv håndtere lydhørhed og sikre, at alt forbliver på kurven i enhver skala.
Se pennens SVG-tekst langs en buet sti af Geoff Graham (@geoffgraham) på CodePen.
Vi kunne anvende den samme metode på enhver form for buet sti.
Se pennens SVG-tekst langs en buet sti af Geoff Graham (@geoffgraham) på CodePen.