Putem flux de text de-a lungul unei linii curbe cu trei instrumente de construit chiar în SVG: , și .
Fragmentul
Dangerous Curves Ahead Cum am ajuns acolo
Imaginați-vă că desenăm o linie curbată în SVG și îi dăm un ID numit curve.
Vezi Pen NgwPYB de Geoff Graham (@geoffgraham) pe CodePen.
Apoi, lăsăm conținutul în SVG folosind eticheta și îi dăm o lățime care se potrivește cu viewBoxdimensiunile SVG . Nu vom vedea încă nimic, dar știm că textul este undeva pe ecran.
Vezi Pen ZyaYOw de Geoff Graham (@geoffgraham) pe CodePen.
Ne dorim foarte mult să vedem textul respectiv. Ne putem înfășura textul în etichetă și îl putem seta să urmeze liniile căii noastre curbe apelând ID-ul căii pe care l-am setat mai devreme.
Vedeți Pen Kqywpe de Geoff Graham (@geoffgraham) pe CodePen.
Acum gătim cu gaz!
Nu vrem ca acea curbă să fie văzută, așa că hai să dăm calea o umplere transparentă. Am putea face acest lucru și în CSS, dar îl aplicăm în linie direct în marcajul SVG de dragul acestui exemplu.
Vedeți Pen xrPbgx de Geoff Graham (@geoffgraham) pe CodePen.
Restul este CSS! Dimensiunea exactă a fontului va depinde de textul însuși și de familia de fonturi utilizată, dar, odată ce atingeți echilibrul corect, SVG în sine va gestiona capacitatea de răspuns și se va asigura că totul rămâne pe curbă la orice scară.
Vedeți Textul SVG Pen De-a lungul unei căi curbate de Geoff Graham (@geoffgraham) pe CodePen.
Am putea aplica aceeași metodă oricărui tip de cale curbată.
Vedeți Textul SVG Pen De-a lungul unei căi curbate de Geoff Graham (@geoffgraham) pe CodePen.