Styling Vector Scalable Graphic (SVG) cu CSS

Astăzi vom continua discuția despre Scalable Vector Graphic (SVG) și, după cum am subliniat în postul nostru anterior, unul dintre avantajele utilizării SVG este că poate fi folosit în stil CSS.

Proprietățile Styling SVG

Styling SVG funcționează în același mod ca și în elementele HTML obișnuite, de fapt, au împărtășit unele proprietăți comune. Cu toate acestea, există și alte proprietăți care sunt destinate în mod specific obiectelor SVG care au propriile specificații în afară de CSS.

De exemplu, în elementul HTML obișnuit, putem adăuga culoarea de fundal fie cu culoare de fundal sau fundal Proprietatea CSS. În SVG, este puțin diferit; culoarea de fundal este specificată cu completati proprietate în loc. De asemenea, granița elementelor este specificată cu accident vascular cerebral proprietate și nu este cu frontieră la fel ca în HTML obișnuit, puteți vedea lista completă aici.

Dacă ați lucrat destul de mult cu editorul de vectori precum Adobe Illustrator, puteți ghici rapid că mecanismul de denumire a proprietăților din SVG este creat de editor.

Implementarea stilului SVG

Putem folosi unul dintre următoarele moduri de a modela elementul SVG;

Atribute de prezentare

Dacă ați văzut lista tuturor proprietăților SVG, toate pot fi adăugate direct pe element pentru a modifica prezentarea elementului. Următorul exemplu arată modul în care putem adăuga completati și accident vascular cerebral proprietate direct pe o RECT element;

Dreptunghiul se va dovedi a fi ca imaginea de mai jos;

Foaia de stil inline

Putem adăuga, de asemenea, stil cu stil atribut. În exemplul următor vom adăuga și noi completati și accident vascular cerebral la RECT, dar de data aceasta îl adăugăm în stil și rotiți-l cu CSS3 transforma proprietate, ca atare;.

Dreptunghiul se va întoarce în același rezultat, numai că acum este de asemenea rotit;

Foaie de stil internă

Încorporați stilul SVG în interiorul stil elementul este, de asemenea, posibil și nu este diferit de modul în care am făcut-o pe HTML obișnuit. Acest exemplu de mai jos arată modul în care adăugăm stiluri interne pentru a afecta elementele SVG în .html document.

Cu toate acestea, SVG este un limbaj bazat pe XML, deci atunci când suntem pe punctul de a adăuga foaie de stil inline într-o .svg document, trebuie să punem declarația de stiluri în interior CDATA, după cum urmează;

CDATA aici este necesar, deoarece CSS poate avea > caracter care va intra în conflict cu parserii XML. Utilizarea CDATA este foarte recomandat pentru încorporarea stilului în SVG, chiar dacă caracterul conflictual nu este dat în foaia de stil.

Foaie de stil exterioară

Foaia de stil extern funcționează, de asemenea, în același mod pentru elementele SVG din .html document.

Din nou în .svg document, trebuie să facem referire la foaia de stil externă xml-stylesheet, ca astfel.

Gruparea elementelor

Elementele SVG pot fi grupate cu element. Elementele de grupare ne vor permite să împărtășim stiluri comune tuturor elementelor din grup, aici este un exemplu;

Atât dreptunghiul cât și cercul vor avea același rezultat.

Gândirea finală

Am parcurs toate aspectele esențiale ale stilului SVG cu CSS și acesta este doar unul dintre avantajele de a servi graficul cu SVG. În următoarea postare vom examina în continuare un altul, deci stați bine acordat.

• Vizualizați demonstrația
• Descărcați sursa