Vi kan flöda text längs en böjd linje med tre verktyg rakt in SVG: , och .
Utdraget
Dangerous Curves Ahead Hur vi kom dit
Tänk dig att vi drar en böjd linje i SVG och ger den ett ID som kallas curve.
Se Pen NgwPYB av Geoff Graham (@geoffgraham) på CodePen.
Sedan släpper vi innehåll i SVG med taggen och ger det en bredd som matchar SVG- viewBoxdimensionerna. Vi kommer inte att se någonting ännu, men vi vet att texten finns där utanför skärmen någonstans.
Se Pen ZyaYOw av Geoff Graham (@geoffgraham) på CodePen.
Vi vill verkligen se den texten. Vi kan slå in vår text i taggen och ställa in den så att den följer raderna i vår böjda väg genom att anropa sökvägs-ID: t vi ställt in tidigare.
Se Pen Kqywpe av Geoff Graham (@geoffgraham) på CodePen.
Nu lagar vi mat med gas!
Vi vill inte att den kurvan ska ses, så låt oss ge vägen en transparent fyllning. Vi kan också göra detta i CSS, men vi använder det inline direkt i SVG-markeringen för detta exempel.
Se pennan xrPbgx av Geoff Graham (@geoffgraham) på CodePen.
Resten är CSS! Den exakta teckenstorleken beror på själva texten och vilken typsnittfamilj som används, men när du väl har hittat rätt balans kommer SVG själv att hantera responsen och se till att allt förblir i kurvan i vilken skala som helst.
Se pennens SVG-text längs en böjd väg av Geoff Graham (@geoffgraham) på CodePen.
Vi kan tillämpa samma metod på alla typer av böjda banor.
Se pennens SVG-text längs en böjd väg av Geoff Graham (@geoffgraham) på CodePen.