Emme voi virrata tekstiä kaarevaa linjaa pitkin kolme työkalua rakennettu suoraan SVG: , ja .
Katkelma
Dangerous Curves Ahead Kuinka pääsimme sinne
Kuvittele, että piirrämme kaarevan viivan SVG: hen ja annamme sille tunnuksen nimeltä curve.
Katso Geoff Grahamin (@geoffgraham) kynä Pen NgwPYB CodePenistä.
Sitten pudotamme sisältöä SVG: hen tagin avulla ja annamme sille SVG- viewBoxmitat vastaavan leveyden . Emme näe vielä mitään, mutta tiedämme, että teksti on jonnekin ruudun ulkopuolella.
Katso Geoff Grahamin (@geoffgraham) kynä ZyaYOw CodePenistä.
Haluamme todella nähdä kyseisen tekstin. Voimme kääri tekstimme tagiin ja asettaa sen seuraamaan kaarevan polun viivoja soittamalla aiemmin asettamallemme polun tunnukselle.
Katso Geoff Graham (@geoffgraham) Pen Kqywpe -koodia CodePenistä.
Nyt ruoanlaitto kaasulla!
Emme halua, että käyrä näkyy, joten annetaan polulle läpinäkyvä täyttö. Voisimme tehdä tämän myös CSS: ssä, mutta sovellamme sitä suoraan SVG-merkinnässä tämän esimerkin vuoksi.
Katso Geoff Grahamin (@geoffgraham) kynä xrPbgx CodePenistä.
Loput on CSS! Tarkka kirjasinkoko riippuu itse tekstistä ja siitä, mitä kirjasinperhettä käytetään, mutta kun saavutat oikean tasapainon, SVG itse hoitaa reagoivuuden ja varmistaa, että kaikki pysyy käyrällä missä tahansa mittakaavassa.
Katso GeP Graham (@geoffgraham) -kynän SVG-teksti kaarevan polun varrella CodePenissä.
Voisimme soveltaa samaa menetelmää mihin tahansa kaarevaan polkuun.
Katso GeP Graham (@geoffgraham) -kynän SVG-teksti kaarevan polun varrella CodePenissä.