Mēs varam plūst tekstu pa liektu līniju ar trim instrumentiem iebūvēti tieši SVG: , un .
Fragments
Dangerous Curves Ahead Kā mēs tur nokļuvām
Iedomājieties, ka mēs SVG izvelkam izliektu līniju un piešķiram tam nosaukumu ID curve.
Skatiet Geoff Graham (@geoffgraham) Pen NgwPYB vietnē CodePen.
Pēc tam, izmantojot tagu , mēs nometam saturu SVG un piešķiram tai platumu, kas atbilst SVG viewBoxizmēriem. Mēs vēl neko neredzēsim, bet mēs zinām, ka teksts kaut kur atrodas ārpus ekrāna.
Skatiet Geoff Graham (@geoffgraham) Pen ZyaYOw pildspalvu vietnē CodePen.
Mēs ļoti vēlamies redzēt šo tekstu. Mēs varam ietīt savu tekstu tagā un iestatīt to sekot mūsu izliektā ceļa līnijām, izsaucot ceļa ID, kuru iestatījām iepriekš.
Skatiet Geoff Graham (@geoffgraham) Pen Kqywpe vietnē CodePen.
Tagad gatavojam ar benzīnu!
Mēs nevēlamies, lai šī līkne būtu redzama, tāpēc piešķirsim ceļam caurspīdīgu aizpildījumu. Mēs to varētu izdarīt arī CSS, taču šī piemēra dēļ mēs to lietojam tieši SVG marķējumā.
Skatiet Geoff Graham (@geoffgraham) Pen xrPbgx vietnē CodePen.
Pārējais ir CSS! Precīzs fonta lielums būs atkarīgs no paša teksta un no tā, kāda fontu saime tiek izmantota, taču, kad jūs atradīsit pareizo līdzsvaru, SVG pati rīkosies ar atsaucību un nodrošinās, ka viss paliek uz līknes jebkurā mērogā.
Skatiet Geoff Graham (@geoffgraham) pildspalvas SVG tekstu pa izliektu ceļu vietnē CodePen.
Šo pašu metodi mēs varētu piemērot jebkura veida izliektajam ceļam.
Skatiet Geoff Graham (@geoffgraham) pildspalvas SVG tekstu pa izliektu ceļu vietnē CodePen.