Styling Scalable Vector Graphic (SVG) med CSS
I dag skal vi fortsette vår diskusjon om Scalable Vector Graphic (SVG), og som vi har påpekt i vårt tidligere innlegg, er en av fordelene ved å bruke SVG at den kan styles med CSS.
SVG Styling Egenskaper
Styling SVG fungerer i utgangspunktet på samme måte som i vanlige HTML-elementer, de delte faktisk noen vanlige egenskaper også. Imidlertid er det andre egenskaper som er beregnet spesielt for SVG-objekt, som har sin egen spesifikasjon, bortsett fra CSS.
For eksempel, I vanlig HTML-element kan vi legge til bakgrunnsfarge enten med bakgrunnsfarge eller bakgrunn CSS eiendom. I SVG er det litt annerledes; bakgrunnsfargen er spesifisert med fylle eiendom i stedet. Elementets grense er også angitt med hjerneslag eiendom og er ikke med grense Som vi gjorde i vanlig HTML, kan du se den komplette listen her.
Hvis du har jobbet med vektoredigerer som Adobe Illustrator ganske lenge, kan du raskt gjette at egenskapsnavnetmekanismen i SVG kommer fra redaktøren.
SVG stil implementering
Vi kan bruke en av følgende måter å utforme SVG-elementet;
Presentasjonsegenskaper
Hvis du har sett alle SVG-egenskaper, kan de alle legges direkte på elementet for å endre elementets presentasjon. Følgende eksempel viser hvordan vi kan legge til fylle og hjerneslag eiendom direkte på en rect element;
Rektangelet vil vise seg å være som skjermbildet under;
Inline stilark
Vi kan også legge til stil med stil Egenskap. I det følgende eksemplet vil vi også legge til fylle og hjerneslag til rect, men denne gangen legger vi det til i stil og roter den med CSS3 forvandle eiendom, som det;.
Rektangelet vil slå i samme resultat, bare at det nå også roteres;
Intern stilark
Legg inn SVG-stilen i stil element er også mulig og er ikke annerledes enn hvordan vi gjorde det på vanlig HTML. Dette eksempelet nedenfor viser hvordan vi legger til interne stiler for å påvirke SVG-elementer i .html dokument.
SVG er imidlertid et XML-basert språk, så når vi skal legge til inline stilark i en .svg dokument, vi må sette stilen erklæring inni CDATA, som følger;
De CDATA her er nødvendig, siden CSS kan ha > tegn som vil være i konflikt med XML-parsers. Ved hjelp av CDATA anbefales sterkt for å legge inn stil i SVG, selv om det motstridende tegnet ikke er oppgitt i stilarket.
Ekstern stilark
Det eksterne stilarket fungerer også på samme måte for SVG-elementer i .html dokument.
Igjen i .svg dokument, må vi henvise det eksterne stilarket som en xml-stylesheet, som så.
Gruppering Elementer
SVG-elementer kan grupperes med
Både rektangelet og sirkelen vil ha det samme resultatet.
Endelig tanke
Vi har gått gjennom alle de essensielle sakene om styling SVG med CSS, og dette er bare en av fordelene ved å betjene grafikk med SVG. I neste innlegg vil vi ta en titt på en annen, så hold deg oppdatert.
- Se demo
- Last ned kilde
