Mi lahko teče besedilo vzdolž ukrivljene linije s tremi orodji vgrajenimi v SVG: , in .
Delček
Dangerous Curves Ahead Kako smo prišli tja
Predstavljajmo si, da v SVG narišemo ukrivljeno črto in ji damo ID curve.
Oglejte si Pen NgwPYB Geoff Graham (@geoffgraham) na CodePen.
Nato s pomočjo oznake spustimo vsebino v SVG in ji damo širino, ki ustreza viewBoxdimenzijam SVG . Ne bomo še videli ničesar, vemo pa, da je besedilo nekje zunaj zaslona.
Oglejte si Pen ZyaYOw, avtorja Geoff Graham (@geoffgraham) na CodePen.
Resnično si želimo videti to besedilo. Besedilo lahko zavijemo v oznako in ga nastavimo tako, da sledi vrsticam naše ukrivljene poti, tako da pokličemo ID poti, ki smo ga nastavili prej.
Oglejte si Pen Kqywpe, avtorja Geoff Graham (@geoffgraham) na CodePen.
Zdaj kuhamo s plinom!
Ne želimo, da bi bila ta krivulja vidna, zato dajmo poti prozorno zapolnitev. To bi lahko storili tudi v CSS, vendar ga zaradi tega primera uporabljamo neposredno v oznaki SVG.
Oglejte si Pen xrPbgx, avtorja Geoff Graham (@geoffgraham) na CodePen.
Ostalo je CSS! Natančna velikost pisave bo odvisna od samega besedila in od tega, katera družina pisav se uporablja, toda ko boste dosegli pravo ravnovesje, bo SVG sam poskrbel za odzivnost in zagotovil, da bo vse ostalo na krivulji v katerem koli merilu.
Oglejte si besedilo pisala SVG po ukrivljeni poti avtorja Geoffa Grahama (@geoffgraham) na CodePen.
To isto metodo bi lahko uporabili za katero koli vrsto ukrivljene poti.
Oglejte si besedilo pisala SVG po ukrivljeni poti avtorja Geoffa Grahama (@geoffgraham) na CodePen.