Styling Scalable Vector Graphic (SVG) s CSS-om
Danas ćemo nastaviti raspravu o Scalable Vector Graphic (SVG), a kao što smo istaknuli u prethodnom postu, jedna od prednosti korištenja SVG-a je da se može stilizirati pomoću CSS-a.
SVG Styling Svojstva
Styling SVG u osnovi radi na isti način kao i kod uobičajenih HTML elemenata, oni zapravo dijele i neka zajednička svojstva. Međutim, postoje i druga svojstva koja su namijenjena posebno za SVG objekt koji ima vlastitu specifikaciju osim CSS-a.
Na primjer, u običnom HTML elementu možemo dodati boju pozadine s boja pozadine ili pozadina CSS svojstvo. U SVG-u je malo drugačije; boja pozadine određena je oznakom ispuniti umjesto toga. Također, granica elementa je specificirana s udar vlasništvo i nije s granica kao što smo radili u običnom HTML-u, ovdje možete vidjeti cijeli popis.
Ako ste dugo radili s uređivačem vektora kao što je Adobe Illustrator, možete brzo pogoditi da je mehanizam za imenovanje svojstava u SVG-u potječe iz urednika.
Implementacija SVG stila
Možemo koristiti jedan od sljedećih načina oblikovanja SVG elementa;
Atributi prezentacije
Ako ste vidjeli popis SVG svojstava, sve se mogu dodati izravno na element kako bi se promijenila prezentacija elementa. Sljedeći primjer pokazuje kako možemo dodati ispuniti i udar vlasništvo izravno na a Direktivom element;
Ispostavit će se da je pravokutnik sličan slici ispod;
Inline Style Sheet
Možemo dodati i stil stil atribut. U sljedećem primjeru također ćemo dodati ispuniti i udar prema Direktivom, ali ovaj put ga dodamo unutar stil i rotirajte ga pomoću CSS3 transformirati vlasništvo, kao što je to slučaj;.
Pravokutnik će se pretvoriti u isti rezultat, samo što je sada i rotiran;
Interni stilski list
Ugradite SVG stil unutar stil element je također moguć i ne razlikuje se od načina na koji smo to radili na običnom HTML-u. Ovaj primjer pokazuje kako dodajemo interne stilove kako bismo utjecali na SVG elemente u .hTML dokument.
Međutim, SVG je jezik utemeljen na XML-u, tako da kada želimo dodati umetnuti stilski list u a .svg dokument, trebamo staviti deklaracije stilova unutra CDATA, kako slijedi;
CDATA ovdje je potrebno, jer CSS može imati > koji će biti u sukobu s XML parsersima. koristeći CDATA Preporučuje se za ugrađivanje stila u SVG, čak i ako konfliktni znak nije naveden u tablici stila.
Vanjski stilski list
Vanjska tablica stilova također radi na isti način za SVG elemente u .hTML dokument.
Opet u .svg dokument, trebamo uputiti vanjski stilski list kao XML-stilova, tako.
Elementi grupiranja
SVG elementi mogu se grupirati s oznakom
I pravokutnik i krug imat će isti rezultat.
Konačna misao
Prošli smo kroz sve bitne stvari u oblikovanju SVG-a pomoću CSS-a i to je samo jedna od prednosti posluživanja grafike u SVG-u. U sljedećem postu ćemo pogledati još jednu, pa ostanite s nama.
- Prikaži demo
- Preuzimanje izvora
