Scalable Scalable Vector Graphic (SVG) su CSS
Šiandien mes tęsime diskusijas dėl „Scalable Vector Graphic“ (SVG), ir, kaip jau minėjome ankstesniame pranešime, vienas iš SVG naudojimo privalumų yra tas, kad jis gali būti suformuotas su CSS.
SVG stiliaus ypatybės
SVG stiliaus kūrimas iš esmės veikia taip pat, kaip ir įprastuose HTML elementuose, jie taip pat dalijasi ir bendromis savybėmis. Tačiau yra ir kitų savybių, kurios skirtos specialiai SVG objektui, turinčioms savo specifikaciją, išskyrus CSS.
Pavyzdžiui, įprastiniame HTML elemente galime pridėti fono spalvą fono spalva arba fonas CSS nuosavybė. SVG yra šiek tiek kitoks; fono spalva nurodyta su užpildyti vietoj to. Taip pat nurodoma elemento riba insultas nuosavybė ir nėra su sienos kaip mes darėme įprastiniame HTML, čia galite pamatyti visą sąrašą.
Jei ilgai dirbote su vektoriaus redaktoriumi, pvz., „Adobe Illustrator“, galite spėti, kad SVG nuosavybės pavadinimo mechanizmas kilęs iš redaktoriaus.
SVG stiliaus įgyvendinimas
SVG elemento stiliui sukurti galime naudoti vieną iš šių būdų;
Pristatymo atributai
Jei matėte visą SVG ypatybių sąrašą, jie visi gali būti tiesiogiai įtraukti į elementą, kad pakeistumėte elemento pateikimą. Šis pavyzdys parodo, kaip galime pridėti užpildyti ir insultas nuosavybė tiesiogiai a tiesiai elementas;
Stačiakampis bus panašus į toliau pateiktą ekraną;
Inline stiliaus lapas
Taip pat galime pridėti stilių stilius atributas. Toliau pateiktame pavyzdyje taip pat pridėsime užpildyti ir insultas į tiesiai, bet šį kartą mes jį įtraukiame į stilius ir pasukite jį su CSS3 transformuoti nuosavybė, pavyzdžiui;.
Stačiakampis sukels tą patį rezultatą, tik kad jis taip pat pasukamas;
Vidinis stiliaus lapas
Įterpkite SVG stilių į stilius elementas taip pat galimas ir nesiskiria tuo, kaip mes tai darėme įprastu HTML. Toliau pateiktame pavyzdyje parodyta, kaip pridedame vidinius stilius, turinčius įtakos SVG elementams .html dokumentą.
Tačiau SVG yra XML pagrindu sukurta kalba, taigi, kai ketiname pridėti eilinį stiliaus lapą a .svg dokumentą, turime įdėti stilių deklaraciją cdata, taip:
The cdata čia reikia, nes CSS gali turėti > simbolis, kuris prieštarauja XML analizatoriams. Naudojimas cdata labai rekomenduojama įterpti stilių į SVG, net jei prieštaraujantis simbolis stiliaus lape nėra pateiktas.
Išorinis stiliaus lapas
Išorinis stiliaus lapas taip pat veikia taip pat ir SVG elementams .html dokumentą.
Vėlgi .svg dokumentą, turime kreiptis į išorinį stiliaus lapą kaip xml-stylesheet, taip.
Grupavimo elementai
SVG elementai gali būti sugrupuoti su
Ir stačiakampis, ir apskritimas turės tą patį rezultatą.
Galutinė mintis
Mes vaikščiojo per visus svarbiausius dalykus, susijusius su SVG formavimu su CSS, ir tai tik vienas iš grafinio su SVG privalumais. Kitame pranešime mes dar kartą pažvelgsime į kitą, taigi palaukite.
- Peržiūrėti demonstraciją
- Atsisiųsti šaltinį
