Bedste svar
Der er mange forskellige måder at bruge / inkludere SVG i dit projekt. Afhængigt af hvilken vej, taktikken til omfarvning af SVG i forskellige tilstande eller betingelser
- Integreret SVG – Integrer SVG-kode direkte.
HTML: Dette er hvad du fik som et SVG-billede på grund af denne XML-kode
CSS: Udfyldningsegenskaben kan bruges til at ændre SVG-farven, da den oprettes ved hjælp af HTML-koden, så du skal ændre farven på stien, som SVG oprettes.
svg { width: 70px; height: 70px;}svg:hover { fill: red;}
2. SVG-symbol / brug – Integrer fil med SVG-kode og hent den derfra ved hjælp af BRUG HTML-tag
HTML: Dette er den måde, du kan eksportere dit SVG-billede fra den anden fil ved hjælp af BRUG HTML-tag.
CSS: Samme måde som den første, der lige har ændret eksportteknikken, denne -teknik bruges, når du har snesevis af SVG-billeder, og du ikke ønsker at samle din HTML-side, så dette skal eksporteres i en fil, og du kan hente det derfra.
svg { width: 70px; height: 70px;}svg:hover { fill: red;}
3. SVG-baggrundsbilleder – indstil billede som andre grafiske formater.
Dette er så simpelt som at du skal ringe til to billeder, eller hvilken tilstand du vil have i henhold til den valgte tilstand.
.icon { background-image: url(icon-black.svg);}
.icon:hover,.icon-bike:focus { background-image: url(icon-red.svg);}
4. Brug af CSS-filteregenskab – men ikke meget anbefalet
Anbefaler ikke, fordi det ikke understøtter opførsel i en anden browser .
.icon:hover { filter: invert(27\%) sepia(51\%) saturate(2878\%) hue-rotate(346deg) brightness(104\%) contrast(97\%);}
Tak, vær venlig at opstem, hvis det fungerer for dig.
Nyd at lære !!