CSS SVG -farge
Eksempel 1
For å begynne å skrive HTML, åpner du Visual Studio -kode og oppretter en ny fil og velger HTML som språket. Filen er opprettet, og alt som gjenstår er å legge til “!”Merk i denne tomme filen som er opprettet her for å få de grunnleggende kodene. Etter å ha trykket på "Enter" får alle HTMLs grunnleggende tagger vises i filen. Kroppen er der vi begynner kodingsprosessen. Vi plasserer en overskrift og "SVG" -merket. Denne "SVG" -merket brukes her for å definere beholderen for SVG -bildet. Vi legger "sirkelen" inne i "SVG" -merket for å lage en SVG -sirkel. Og lukk deretter "svg" -merket. Nå oppretter vi CSS -filen og starter koding i CSS -filen for å bruke farge på denne SVG -sirkelen. Vi kobler også CSS -filen til denne gjeldende HTML -filen ved å bruke "link" -merket i "hodet.”
Her er CSS -koden der vi setter "bredden" på "SVG" som "300px" og "høyden" på denne "SVG" er "300px". Vi bruker "hjerneslag" her fordi når vi må legge litt kant til denne "SVG" -sirkelen. Vi setter "hjerneslag" -verdien som "rød.”Vi setter også bredden ved å bruke“ Stroke-bredden ”, og vi satte denne“ slagbredden ”til“ 4px ”. Nå fargelegger vi denne SVG -sirkelen ved hjelp av "fyll" -egenskapen til CSS. Vi bruker denne "fyll" egenskapen når vi har] for å fargelegge SVG -grafikken. Her har vi SVG -sirkelen, og vi legger til farge til denne SVG -sirkelen, så vi bruker "Fyll" -egenskapen. Vi setter denne "fyll" eiendomsverdien som "gul.”
Du kan se sirkelen i utgangen; Fargen på denne SVG -sirkelen er gul fordi vi la til denne fargen ved hjelp av "fyll" -egenskapen i CSS, og grensen til denne SVG -sirkelen er i rød farge fordi vi brukte "hjerneslag" -egenskapen i CSS -kode.
Eksempel 2
Vi lager to rektangel SVG -er her ved å plassere "div", og inne i denne "div" har vi to forskjellige "SVG -er.”Vi bruker“ Rect ”for å lage et rektangel. Her bruker vi to Rect med navnene “Rect1” og “Rect2” inne i SVG og lukker deretter “Div” her. Nå vil vi bruke forskjellige farger på disse rektangelene SVG -er ved å bruke CSS -egenskapene.
Vi justerer alle "kropp" -elementene til "sentrum.”Deretter bruker vi den“ røde ”fargen på overskriften, og“ Algerie ”vi bruker som“ Font-Family.”Vi styler også denne overskriften til“ kursiv."" Høyden "på den første" rect1 "SVG er" 300px ", og" bredden "vi bruker her er" 500px ". Vi "fyller" dette rektangelet med "gult" som det er SVG -formen, så vi bruker "fyll" her. Deretter setter vi samme høyde og bredde til neste SVG -rektangel og "fyller" dette rektangelet med "lilla.”
Det er to SVG -rektangler i utgangen. Vi bruker CSS -egenskapene for å fargelegge disse SVG -rektanglene. Begge rektangler er SVG -er.
Eksempel 3
I denne koden lager vi en SVG -polygon, så vi bruker "SVG" -merket og lager en "polygon" her ved å definere punktene til polygon og deretter lukke "SVG" -merket.
Vi bruker den "algeriske" skriften og "lilla" fargen for overskriften. Vi setter "SVG" "bredde" og "høyde" som "300px" og "200px", henholdsvis. Så bruker vi "fyll" -egenskapen. Vi setter dette "fyll" til "rosa" slik at polygonfargen vises "rosa.”Vi legger også noen grenser for denne polygonen, så vi bruker" hjerneslag "for å gi fargen på grensen, som vi setter som" lilla.”Vi setter bredden på denne grensen ved å bruke egenskapen“ slagbredde ”og sette den til“ 5 ”. Deretter bruker vi "fyllestyret", som brukes til å bestemme den indre delen av polygonen, og sette den til "Even-odde.”
Her ser du en stjerne som også kalles en polygon. Denne polygonen er SVG -polygon, og vi fargelegger denne SVG -polygonen her i dette eksemplet ved å bruke "fyll" -egenskapen.
Eksempel 4
Vi kommer til å generere tre forskjellige ikoner her, så vi bruker "jeg" -merket i denne HTML -filen. Vi gir forskjellige navn til hvert ikon, så; Vi vil sette en annen farge for hvert SVG -ikon.
Vi satte først "ikonet", "bredde" og "høyde", og begge er satt til "100px". Vi setter også disse ikonene i en linje, så vi bruker "display" -egenskapen og setter den til "inline-block.”Nå, i“ Webkit-Masken ”, gir vi“ URL ”til SVG-bildet og setter“ Webkit-Maske-Size ”til“ Cover.”Også" maske-størrelse "er" cover "her. Så skal vi bruke farger på disse SVG-ikonene ved hjelp av "bakgrunnsfargen" -egenskapen. Vi satte "rødt" for det første SVG -ikonet, "rosa" som "bakgrunnsfarge" for det andre SVG -ikonet, og "gul" farge for det tredje SVG -ikonet.
Alle de tre SVG-ikonene vises i forskjellige farger fordi vi setter disse fargene i CSS ved å bruke bakgrunnsfargede egenskaper på alle disse ikonene hver for seg.
Eksempel 5
Her bruker vi “XML” -versjonen og gir deretter banen til SVG -ikonet her, og så vil vi endre fargen på dette ikonet ved å sveve, og dette vil bli gjort i CSS -koden.
Vi setter fargen på dette ikonet ved å bruke "fyll" -egenskapen, ettersom det er SVG -ikonet, så det er derfor vi bruker "Fyll" her. Vi setter det “svart.”Dette ikonet vil vises i svart. Vi bruker også "svevet" med dette "ikonet" og setter "fyll" "oransje", så når vi svever musen over dette SVG -ikonet, vil fargen på dette endre seg til "oransje", som vi har satt "oransje" her i "fyll" av "sveve.”De“ tekst-align ”settene til“ Center ”, og“ Polstding ”vi bruker her er“ 2em ”.
Den første utgangen viser før du svever, og du kan merke at fargen på dette SVG -ikonet vises i svart, som vi har satt i CSS -koden, men når vi svever over dette SVG -ikonet, endres fargen, og du kan se dette inn neste utgang.
I denne andre utgangen gjengir fargen på SVG -ikonet “oransje” fordi vi setter “oransje” som “fyll” når vi svever over dette SVG -ikonet i CSS.
Konklusjon
Denne opplæringen ble opprettet for å hjelpe deg med å forstå CSS -egenskapene, som lar oss fargelegge SVG. Denne opplæringen har dekket dette konseptet i stor dybde. Vi har presentert fem forskjellige eksempler her der vi designer forskjellige SVG -er og deretter fargelegger disse SVG -ene, og vi har endret fargen på forskjellige SVG -ikoner. Vi har gitt utgangene til alle disse kodene i denne opplæringen. Vi har brukt to egenskaper her for å bruke farge på SVG-ene, som var "fyll" og "bakgrunnsfarge" -egenskaper, og forklarte dem i detalj her. Etter å ha fulgt denne opplæringen nøye, håper jeg at du vil kunne fargelegge SVG -er ved å bruke disse egenskapene i CSS.