Styling Scalable Vector Graphic (SVG) med CSS

I dag skal vi fortsætte vores diskussion om Scalable Vector Graphic (SVG), og som vi har påpeget i vores tidligere indlæg, er en af ​​fordelene ved at bruge SVG, at den kan styles med CSS.

SVG Styling Egenskaber

Styling SVG arbejder grundlæggende på samme måde som i almindelige HTML-elementer, de har faktisk også delet nogle fælles egenskaber. Der er dog andre egenskaber, der specifikt er beregnet til SVG-objekt, som har deres egen specifikation bortset fra CSS.

For eksempel, I almindeligt HTML-element kan vi også tilføje baggrundsfarve med baggrundsfarve eller baggrund CSS ejendom. I SVG er det lidt anderledes; baggrundsfarven er angivet med fylde ejendom i stedet. Elementets grænse er også angivet med slag ejendom og er ikke med grænse Som vi gjorde i almindelig HTML, kan du se den komplette liste her.

Hvis du har arbejdet med vektorredaktør som Adobe Illustrator ganske lang tid, kan du gætte hurtigt, at ejendomsnavnetmekanismen i SVG stammer fra redaktøren.

SVG Style Implementation

Vi kan bruge en af ​​følgende måder at style SVG element på;

Præsentationsattributter

Hvis du har set alle SVG-ejendomslister, kan de alle tilføjes direkte på elementet for at ændre elementets præsentation. Følgende eksempel viser, hvordan vi kan tilføje fylde og slag ejendom direkte på en rect element;

Rektanglet vil vise sig at være som skærmbilledet nedenfor;

Inline Style Sheet

Vi kan også tilføje stil med stil attribut. I det følgende eksempel vil vi også tilføje fylde og slag til rect, men denne gang tilføjer vi det inden for stil og drej det med CSS3 omdanne ejendom som sådan;.

Rektanglet vil slå i samme resultat, kun at det nu også roteres;

Internt stilark

Embed SVG-stilen i stil element er også muligt og er ikke anderledes end hvordan vi gjorde det på almindelig HTML. Dette eksempel nedenfor viser, hvordan vi tilføjer interne stilarter til at påvirke SVG-elementer i .html dokument.

SVG er imidlertid et XML-baseret sprog, så når vi er ved at tilføje inline stilark i en .svg dokument, vi har brug for at sætte stilen erklæring inde CDATA, som følger;

Det CDATA her er påkrævet, da CSS kan have > tegn, der vil være i konflikt med XML-parsere. Ved brug af CDATA anbefales stærkt til indlejring af stil i SVG, selvom det modstridende tegn ikke er angivet i stilarket.

Eksternt stilark

Det eksterne stilark fungerer også på samme måde for SVG-elementer i .html dokument.

Igen i .svg dokument, skal vi henvise det eksterne stilark som en xml-stylesheet, ligesom.

Gruppering Elementer

SVG elementer kan grupperes med element. Gruppering elementer giver os mulighed for at dele fælles stilarter til alle elementerne i gruppen, her er et eksempel;

Både rektangel og cirkel vil have det samme resultat.

Endelig tanke

Vi har gennemgået alle de væsentlige spørgsmål om styling SVG med CSS, og dette er kun en af ​​fordelene ved at betjene grafik med SVG. I det næste indlæg tager vi et kig ind i en anden, så hold dig opdateret.

• Se Demo
• Download kilde