Mi folyhat szöveget ívelt vonal három eszközökkel építettük SVG: , és .
A kivonat
Dangerous Curves Ahead Hogyan kerültünk oda
Képzelje el, hogy egy görbe vonalat rajzolunk az SVG-be, és megadjuk neki az úgynevezett azonosítót curve.
Lásd a Pen NgwPYB-t Geoff Graham (@geoffgraham) a CodePen-en.
Ezután a címke segítségével bedobjuk a tartalmat az SVG-be, és olyan szélességet adunk neki, amely megegyezik az SVG viewBoxméreteivel. Még nem látunk semmit, de tudjuk, hogy a szöveg valahol a képernyőn kívül van.
Lásd: Geoff Graham (@geoffgraham) Pen ZyaYOw a CodePen-en.
Nagyon szeretnénk látni azt a szöveget. Szövegünket beburkolhatjuk a címkébe, és beállíthatjuk, hogy kövesse az ívelt utunk vonalait azáltal, hogy felhívjuk a korábban beállított útvonalazonosítót.
Lásd Geoff Graham (@geoffgraham) Pen Kqywpe-ját a CodePen-en.
Most gázzal főzünk!
Nem akarjuk, hogy ezt a görbét lássák, ezért adjuk meg az út átlátszó kitöltését. Csinálhatnánk ezt CSS-ben is, de a példa kedvéért közvetlenül az SVG jelölésben alkalmazzuk inline.
Lásd Geoff Graham (@geoffgraham) Pen xrPbgx-jét a CodePen-en.
A többi CSS! A pontos betűméret magától a szövegetől és a használt betűtípus-családtól függ, de ha megfelelő egyensúlyt talál, az SVG maga kezeli a válaszkészséget és biztosítja, hogy minden bármilyen skálán a görbén maradjon.
Lásd: Geoff Graham (@geoffgraham) a Pen SVG szöveg görbe útvonal mentén a CodePen-en.
Ugyanezt a módszert alkalmazhatnánk bármilyen típusú görbe útra.
Lásd: Geoff Graham (@geoffgraham) a Pen SVG szöveg görbe útvonal mentén a CodePen-en.