Tekstiga töötamine skaleeritava vektorgraafikaga (SVG)

Meie eelmistes postitustes kasutasime kujundite loomiseks SVG-d. Selles ametikohas, nagu pealkiri ütles, uurime SVG-ga teksti loomine. On palju asju, mida me saame teha tekstiga, mis ületab lihtsa HTML-i teksti.

Niisiis, vaatame need välja.

Põhiline rakendamine

Aga enne kui läheme kaugemale, vaatame, kuidas Tekst SVG-s on moodustatud selle algtasandil:

SVG-s olev tekst, nagu näete ülaltoodud koodilõigust, on defineeritud piisavalt loogilise sildiga, . See element nõuab põhimõtteliselt ainult seda x ja y atribuudid algtaseme koordinaatide määramiseks.

Pildiallikas: Wikipedia.org

Ja siin on see, kuidas tekst välja näeb. Praegu tundub, et HTML-i tavalise tekstiga ei ole vahet.

Põhilised teksti stiilid

Teksti saab kujundada ka CSS omadustega, näiteks fondi kaal, font-style, ja teksti kaunistus mida saab rakendada kas läbi sisemine stiil, sisemine stiil või välise stiilis nagu me oleme eelmises postituses arutanud SVG kujundamine CSS-iga. Siin on mõned näited.

Julge

 See on skaleeritava vektorgraafikaga (SVG) tekst 

Kaldkiri

 See on kaldkirjas tekst skaleeritava vektorgraafikaga (SVG) 

Allakriipsutus

 See on allajoonitud tekst skaleeritava vektorgraafikaga (SVG) 

Element

Mõningatel juhtudel, kui me tahame kasutada ainult stiili või atribuute teatud osa tekstist, saame kasutada . Järgnev näide näitab, kuidas me lisame julge, kaldkirjas ja rõhutada tekstireale.

 See on julge, see on kaldkiri ja see on rõhutatud 

Kirjutamisrežiim

Tekst ei ole ainult kirjutatud vasakult paremale. Näiteks mujal maailmas, näiteks Jaapanis, on tekst kirjutatud ülevalt alla. SVG-s saab seda teha kirjutamisrežiimis atribuut.

 ぁ ぃ ぅ ぇ ぉ か き  

Ülaltoodud näites oleme pannud mitu juhuslikku jaapani tähemärki (ärge küsige mulle nende tähendust, mul pole tõesti aimugi) ja muuda selle stiilideklaratsiooni suunda, kirjutamisrežiim: tb, kus tb on seista ülevalt alla.

Teksti ülevaade

SVG tekst on põhimõtteliselt graafiline, nii saame rakendada ka insult atribuut, et lisada tekstile piirjoon nagu ka teiste kujunditega.

Ülaltoodud koodilõigu lisasime insult omistada elemendi ja eemaldage tekstivärv, täpsustades täitke atribuut mitte ükski tulemuseks on järgmine teksti esitlus.

Teksti tee

SVG-s ei saa Teksti kuvada mitte ainult horisontaalselt ja vertikaalselt, vaid ka järgige rada. Siin on, kuidas seda teha.

Esiteks peame määratlema tee. Kuid tee loomine otse HTML-is ei ole nii intuitiivne, me peame mõistma koordinaate ja mõningaid käske, mida ma olen kindel, et enamik meist püüab vältida. Et seda sammu lihtsamaks teha, soovitan mul isiklikult avada vektoriredaktor (Inkscape või Illustrator), luua tee ja luua SVG-kood.

Siis pange element sees element. defs siin tähendab määratlus.

Pange tähele, et oleme lisanud ka id omistada . Nüüd peame ainult ühendama tee id meie tekstiga element;

    Lorem ipsum dolor sit amet consectetur.   

Lisalugemist: SVG teed

Tekst Gradient

Samuti on SVG-s võimalik teksti lisamiseks taustale lisada, ja kui teil on õnnestunud ülal tekstiosa sektsioonis, oleks see palju lihtsam.

Esiteks peame määratlema gradientvärvid.

Kui kõik vajalikud definitsioonid on loodud, peame nüüd teksti lisama ja viitama täitke atribuut gradienti id atribuut järgmiselt;

 Gradient 

Ja siin on see tekst, kus on gradient.

Lisalugemist: SVG gradient ja muster

Edasised viited

SVG-s olev tekst on kahtlemata võimas, tegelikult on palju asju, mida me suudame teha kaugemale sellest, mida me selles postituses võime majutada. Seega oleme allpool koostanud veel mõned viited, et teenida teie huvi selle teema vastu.

• Fondi kohta SVG-s - Divya Manian
• SVG teksti ametlik dokumentatsioon - W3.org
• SVG dokumentatsioon Mozilla Devis. Võrk koos näidete ja tööriistadega - MDN
• SVG kirjutusrežiimi atribuut - MDN

• Kuva demo
• Allalaadimise allikas