Beste svaret
Det er mange forskjellige måter å bruke / inkludere SVG i prosjektet ditt. Avhengig av hvilken vei, taktikken for omfarging av SVG i forskjellige tilstander eller tilstand
- Inline SVG – Legge inn SVG-kode direkte.
HTML: Dette er hva du fikk som SVG-bilde på grunn av denne XML-koden
CSS: Fill-egenskapen kan brukes til å endre fargen på SVG, fordi den er opprettet ved hjelp av HTML-koden, så du må endre fargen på banen SVG opprettet.
svg { width: 70px; height: 70px;}svg:hover { fill: red;}
2. SVG-symbol / bruk – legg inn fil med SVG-kode og hent den derfra ved å bruke BRUK HTML-tag
HTML: Dette er måten du kan eksportere SVG-bildet ditt fra den andre filen ved å bruke BRUK HTML-tag.
CSS: Samme måte som den første bare endret eksportteknikken denne -teknikk brukes når du har dusinvis av SVG-bilder, og du ikke vil samle HTML-siden din, så dette må eksporteres i en fil, og du kan hente den derfra.
svg { width: 70px; height: 70px;}svg:hover { fill: red;}
3. SVG-bakgrunnsbilder – angi bilde som andre grafiske formater.
Dette er så enkelt som at du trenger å ringe to bilder eller hvilken tilstand du vil ha i henhold til tilstanden du valgte.
.icon { background-image: url(icon-black.svg);}
.icon:hover,.icon-bike:focus { background-image: url(icon-red.svg);}
4. Bruker CSS-filteregenskap – Men ikke mye anbefalt
Anbefaler ikke fordi det ikke støtter oppførsel i en annen nettleser .
.icon:hover { filter: invert(27\%) sepia(51\%) saturate(2878\%) hue-rotate(346deg) brightness(104\%) contrast(97\%);}
Takk, vær så snill å stemme hvis det fungerer for deg.
Kos deg med å lære !!