Lucrul cu text în Grafică Vector Scalabilă (SVG)
În postările noastre anterioare, am folosit SVG pentru a crea forme. În acest post, după cum a spus titlul, vom analiza crearea de text cu SVG. Există o mulțime de lucruri pe care le putem face cu textul dincolo de ceea ce textul HTML simplu este capabil să facă.
Deci, haideți să le verificăm.
Implementarea de bază
Dar, înainte să mergem mai departe, să vedem cum Text în SVG se formează la nivelul său de bază:
Textul din SVG, după cum puteți vedea din fragmentul de cod de mai sus, este definit printr-o etichetă suficient de logică, X și y atribute pentru a specifica coordonatele liniei de bază.
Sursa imaginii: Wikipedia.org
Iată cum va arăta textul. Pentru moment, se pare că nu are nicio diferență cu textul obișnuit din HTML.
Stiluri de bază de bază
Textul poate fi, de asemenea, stil cu proprietăți CSS, cum ar fi grosimea fontului, stilul fontului, și text-decor care pot fi implementate fie prin intermediul inline, în stil intern sau Stil extern așa cum am discutat în postul anterior despre Styling SVG cu CSS. Iată câteva exemple.
Îndrăzneţ
Acesta este text în Scalable Vector Graphic (SVG)
Cursiv
Acesta este textul italic din Scalable Vector Graphic (SVG)
sublinia
Acest text este subliniat în Scalable Vector Graphic (SVG)
Element
În unele cazuri, când dorim să aplicăm numai stiluri sau atribute unei anumite porțiuni a textului, putem folosi
Acest lucru este îndrăzneț ,acest lucru este italic șiacest lucru este subliniat
Modul de scriere
Textul nu este scris numai din de la stânga la dreapta. În alte părți ale lumii, Japonia, de exemplu, textul este scris de la de sus pana jos. În SVG, acest lucru se poate face folosind scris-mode atribut.
ぁ ぃ ぅ ぇ ぉ か き
În exemplul de mai sus, am pus mai multe caractere japoneze aleatoare (nu mă întrebați sensul lor, chiar nu am idee) și modificați orientarea cu această declarație de stil, modul de scriere: tb, Unde tb este de acord de sus pana jos.
Descrierea textului
Textul din SVG este în principiu un grafic, astfel încât să putem aplica și accident vascular cerebral atributul de adăugare a unei linii de graniță la text ca și în cazul celorlalte forme.
În fragmentul de cod de mai sus, am adăugat accident vascular cerebral atribut la completati atribuit lui nici unul care va avea ca rezultat prezentarea textului următor.
Calea textului
În SVG, textul nu poate fi afișat numai pe orizontală și pe verticală, dar poate, de asemenea urmați un model de traseu. Iată cum să faceți acest lucru.
În primul rând, trebuie să definim calea. Cu toate acestea, crearea unei Căi direct în HTML nu este intuitivă, trebuie să înțelegem coordonatele și unele comenzi pe care eu sunt sigur că majoritatea dintre noi vor încerca să o evite. Deci, pentru a face acest pas mai simplu, eu personal sugerez să deschid un editor de vectori (Inkscape sau Illustrator), să creez o cale și să generez codul SVG.
Apoi puneți defs aici înseamnă definiție.
Observați că am adăugat și o id atribut la id la textul nostru cu
Lorem ipsum dolor stau amet consectetur.
Citirea ulterioară: Cărți SVG
Gradientul textului
Adăugarea unui fundal pentru a umple textul este posibilă și în SVG, iar dacă ați reușit în secțiunea Calea textului de mai sus, acest lucru ar fi mult mai ușor.
În primul rând, trebuie să definim culorile gradientului.
Când toate definițiile necesare sunt stabilite, acum trebuie doar să adăugăm textul și să trimitem completati atribuiți gradientului id atribut, după cum urmează;
Gradient
Și aici este, textul cu gradient.
Citirea ulterioară: SVG Gradient și model
Alte referințe
Textul din SVG este, fără îndoială, puternic, există, de fapt, multe lucruri pe care le putem face dincolo de ceea ce putem găzdui în acest post. Deci, mai jos am pus împreună câteva referințe pentru a vă satisface interesul pentru acest subiect.
- Despre Fonturi în SVG - Divya Manian
- Documentația oficială SVG Text - W3.org
- SVG Dovada la Mozilla Dev. Rețea cu exemple și instrumente - MDN
- Atributul modului de scriere SVG - MDN
- Vizualizați demonstrația
- Descărcați sursa
