Skaalautuva vektorgraafiku (SVG) kujundamine CSS-iga

Täna jätkame arutelu skaleeritava vektorgraafikaga (SVG) ja nagu me eelmises postituses märkisime, on üks SVG kasutamise eeliseid see, et seda saab kujundada CSS-ga.

SVG stiilide omadused

SVG stiilimine toimib põhimõtteliselt samamoodi nagu tavapärastes HTML-elementides, nad jagavad ka mõningaid ühiseid omadusi. Siiski on ka teisi omadusi, mis on mõeldud spetsiaalselt SVG objektile, millel on oma spetsifikatsioon peale CSS.

Näiteks, tavalisel HTML-elemendil võime lisada ka taustavärvi taustavärv või taustal CSS-i omadus. SVG-s on see veidi erinev; taustavärv on määratud täitke asemel. Ka elemendi piir on määratud insult omandiõigus ja mitte koos piiri nagu me tegime tavalises HTML-is, näete siin täielikku nimekirja.

Kui olete töötanud vektori redaktoriga nagu Adobe Illustrator üsna kaua, võite kiiresti arvata, et SVG-s olevate varade nimetamise mehhanism pärineb redaktorilt.

SVG stiili rakendamine

SVG elemendi kujundamiseks võime kasutada ühte järgmistest viisidest;

Esitluse atribuudid

Kui olete näinud kõiki SVG omaduste loendit, saab neid kõiki elementi otse lisada elementi esitluse muutmiseks. Järgnev näide näitab, kuidas me saame lisada täitke ja insult vara otse a otse element;

Ristkülik osutub sarnaseks allolevale pildile;

Inline Style Sheet

Me võime lisada ka stiili stiili atribuut. Järgmises näites lisame ka täitke ja insult Euroopa otse, kuid seekord me lisame selle stiili ja pöörake seda CSS3-ga teisendada vara;.

Ristkülik pöörab samale tulemusele, ainult et see on nüüd ka pööratud;

Sisemine stiilileht

Sisesta SVG-stiil stiili element on samuti võimalik ja ei erine sellest, kuidas me seda tegime tavalises HTML-is. Allolev näide näitab, kuidas sisemisi stiile lisada SVG elementide mõjutamiseks .html dokument.

SVG on aga XML-põhine keel, nii et kui me lisame inline stiili lehele a .svg me peame sisestama stiilideklaratsiooni cdata, järgnevalt;

The cdata siin on vajalik, kuna CSS võib olla > mis on vastuolus XML-analoogidega. Kasutamine cdata on väga soovitatav stiili SVG-sse kaasamiseks, isegi kui vastuoluline märk ei ole stiilile lisatud.

Väline stiilileht

Väline stiilileht töötab ka SVG elementide puhul samal viisil .html dokument.

Jällegi .svg dokument, peame välise stiili lehele viitama xml-stylesheet, niimoodi.

Elementide rühmitamine

SVG elemente saab grupeerida element. Grupeerimiselemendid võimaldavad meil ühiseid stiile jagada kõigi grupi elementidega. Siin on näide;

Nii ristkülikul kui ka ringil on sama tulemus.

Lõplik mõte

Oleme kõndinud läbi kõigi oluliste küsimuste, mis on seotud SVG kujundamisega CSS-iga ja see on vaid üks eeliseid graafilise SVG-ga teenindamisel. Järgmises postituses vaatleme veelkord teist, nii et olge kursis.

• Kuva demo
• Allalaadimise allikas