Siamo in grado di scorrere il testo lungo una linea curva con tre strumenti integrati a destra in SVG: , e .
Lo snippet
Dangerous Curves Ahead Come ci siamo arrivati
Immagina di disegnare una linea curva in SVG e di assegnargli un ID chiamato curve.
Guarda la Pen NgwPYB di Geoff Graham (@geoffgraham) su CodePen.
Quindi, rilasciamo il contenuto nell'SVG usando il tag e gli diamo una larghezza che corrisponda alle viewBoxdimensioni SVG . Non vedremo ancora nulla, ma sappiamo che il testo è lì fuori dallo schermo da qualche parte.
Guarda la penna ZyaYOw di Geoff Graham (@geoffgraham) su CodePen.
Vogliamo davvero vedere quel testo. Possiamo racchiudere il nostro testo nel tag e impostarlo in modo che segua le linee del nostro percorso curvo chiamando l'ID del percorso che abbiamo impostato in precedenza.
Guarda Pen Kqywpe di Geoff Graham (@geoffgraham) su CodePen.
Adesso cuciniamo a gas!
Non vogliamo che quella curva venga vista, quindi diamo al tracciato un riempimento trasparente. Potremmo anche farlo in CSS, ma lo stiamo applicando in linea direttamente nel markup SVG per il bene di questo esempio.
Vedi la penna xrPbgx di Geoff Graham (@geoffgraham) su CodePen.
Il resto è CSS! La dimensione esatta del carattere dipenderà dal testo stesso e dalla famiglia di caratteri utilizzata ma, una volta raggiunto il giusto equilibrio, l'SVG stesso gestirà la reattività e assicurerà che tutto rimanga sulla curva in qualsiasi scala.
Guarda il testo SVG della penna lungo un percorso curvo di Geoff Graham (@geoffgraham) su CodePen.
Potremmo applicare lo stesso metodo a qualsiasi tipo di percorso curvo.
Guarda il testo SVG della penna lungo un percorso curvo di Geoff Graham (@geoffgraham) su CodePen.