Mērogojamu vektorgrafiku (SVG) ar CSS

Šodien mēs turpināsim diskusiju par Scalable Vector Graphic (SVG), un, kā mēs norādījām iepriekšējā ziņojumā, viena no SVG izmantošanas priekšrocībām ir tā, ka to var veidot ar CSS.

SVG Styling Properties

SVG dizains būtībā darbojas tāpat kā parastos HTML elementos, un tie patiešām kopīgi izmantoja arī dažas kopīgas īpašības. Tomēr ir arī citas īpašības, kas ir īpaši paredzētas SVG objektam, kam ir savs specifikācijas, izņemot CSS.

Piemēram, regulārajā HTML elementā varam pievienot fona krāsu ar fona krāsa vai fona CSS īpašums. SVG ir nedaudz atšķirīgs; fona krāsa ir norādīta ar aizpildiet vietā. Arī elementa robeža ir norādīta ar insults īpašums un nav ar robežu tāpat kā mēs regulāri rīkojāmies HTML, jūs varat redzēt pilnu sarakstu šeit.

Ja esat diezgan ilgi strādājis ar vektoru redaktoru, piemēram, Adobe Illustrator, varat ātri uzminēt, ka SVG īpašumtiesību mehānisms ir izveidots no redaktora.

SVG stila ieviešana

SVG elementa stilam var izmantot vienu no šādiem veidiem;

Prezentācijas atribūti

Ja esat redzējis visu SVG rekvizītu sarakstu, tos visus var pievienot tieši elementam, lai mainītu elementa prezentāciju. Nākamais piemērs parāda, kā mēs varam pievienot aizpildiet un insults īpašums tieši uz taisnība elements;

Taisnstūris izrādīsies līdzīgs tālāk redzamajam ekrānam;

Inline Style Sheet

Mēs varam arī pievienot stilu ar stils atribūts. Nākamajā piemērā mēs arī pievienosim aizpildiet un insults uz taisnība, bet šoreiz mēs to pievienojam stils un pagrieziet to ar CSS3 pārveidot īpašums, piemēram,;.

Taisnstūris kļūs tāds pats, tikai tagad, kad tas arī ir pagriezts;

Iekšējā stila lapa

Ievietojiet SVG stilu stils elements ir arī iespējams un neatšķiras no tā, kā mēs to darījām parastajā HTML. Šajā piemērā redzams, kā mēs pievienojam iekšējos stilus, lai ietekmētu SVG elementus .html dokumentu.

Tomēr SVG ir uz XML balstīta valoda, tāpēc, kad mēs gatavojamies pievienot inline stila lapu a .svg mums ir jāievieto stilu deklarācija cdata, sekojoši;

The cdata šeit ir nepieciešama, jo CSS var būt > raksturs, kas būs pretrunā ar XML parsers. Lietošana cdata ir ļoti ieteicams stila iekļaušanai SVG, pat ja konfliktējošais raksturs nav norādīts stila lapā.

Ārējā stila lapa

Ārējā stila lapa darbojas tāpat kā SVG elementiem .html dokumentu.

Atkal .svg dokumentu, mums ir jānorāda ārējā stila lapa kā xml-stylesheet, tāpat kā.

Elementu grupēšana

SVG elementus var grupēt ar elementu. Grupēšanas elementi ļaus mums koplietot kopīgos stilus visiem grupas elementiem, šeit ir piemērs;

Gan taisnstūrim, gan aplim būs tāds pats rezultāts.

Galīgā doma

Mēs esam gājuši cauri visiem būtiskajiem jautājumiem, kas saistīti ar SVG veidošanu ar CSS, un tas ir tikai viena no priekšrocībām, sniedzot grafiku ar SVG. Nākamajā amatā mēs apskatīsim vēl vienu, tāpēc palieciet.

• Skatīt demonstrāciju
• Lejupielādēt avotu