Styling Scalable Vector Graphic (SVG) s CSS
Danes bomo nadaljevali našo razpravo o Scalable Vector Graphic (SVG), in kot smo poudarili v naši prejšnji objavi, je ena od prednosti uporabe SVG-a, da ga lahko stiliziramo s CSS.
SVG Styling lastnosti
Styling SVG v bistvu deluje na enak način kot pri običajnih elementih HTML, pravzaprav si delijo tudi nekatere skupne lastnosti. Vendar pa obstajajo tudi druge lastnosti, ki so namenjene posebej za objekt SVG, ki ima svoje specifikacije, razen CSS.
Na primer, v običajnem elementu HTML lahko dodamo barvo ozadja z Barva ozadja ali ozadju Lastnost CSS. V SVG je nekoliko drugačen; barva ozadja je določena z fill namesto tega. Tudi meja elementa je podana z kap premoženja in ni z meje kot v običajnem HTML-ju, si lahko celoten seznam ogledate tukaj.
Če ste že dolgo delali z vektorskim urejevalnikom, kot je Adobe Illustrator, lahko hitro ugibate, da je mehanizem za poimenovanje lastnosti v SVG-ju ustvarjen iz urejevalnika.
Izvajanje sloga SVG
Za slog elementa SVG lahko uporabimo enega od naslednjih načinov;
Atributi predstavitve
Če ste videli vse sezname lastnosti SVG, jih lahko vse dodate neposredno na element, da spremenite predstavitev elementa. Naslednji primer prikazuje, kako lahko dodamo fill in kap nepremičnine neposredno na a rect element;
Pravokotnik se bo izkazal kot spodnji posnetek zaslona;
Inline Style Sheet
Lahko dodamo tudi slog slog atribut. V naslednjem primeru bomo dodali še fill in kap do rect, toda tokrat dodamo v slog in ga zavrtite s CSS3 transform tako lastnino;.
Pravokotnik se bo obrnil z enakim rezultatom, le da je sedaj tudi obrnjen;
Notranji slogovni list
Vdelajte slog SVG v slog element je prav tako mogoč in se ne razlikuje od tega, kako smo ga delali na običajnem HTML-ju. Ta primer spodaj prikazuje, kako dodajamo notranje sloge, ki vplivajo na elemente SVG v .html dokument.
Vendar pa je SVG jezik, ki temelji na XML-ju, tako da, ko nameravamo dodati slogovno slogovno datoteko v a .svg dokument, moramo deklaracijo slogov postaviti znotraj cdata, kot sledi;
The cdata tukaj je potrebno, saj lahko CSS ima > znak, ki bo v nasprotju z razčlenjevalniki XML. Uporaba cdata je zelo priporočljivo za vstavljanje sloga v SVG, tudi če se sporni znak ne poda v slogu.
Zunanji list s slogi
Zunanja slogovna datoteka deluje tudi na enak način za elemente SVG v .html dokument.
Spet v .svg dokument, moramo kot zunanji slog zapisati kot xml-stylesheet, tako.
Elementi združevanja
Elemente SVG lahko združite z
Pravokotnik in krog imata enak rezultat.
Končna misel
Preskusili smo vse bistvene stvari pri oblikovanju SVG s CSS in to je le ena od prednosti serviranja grafike s SVG. V naslednjem postu bomo pogledali še eno, zato ostanite z nami.
- Prikaži predstavitev
- Prenesi vir
