Beste antwoord
Er zijn veel verschillende manieren om SVG in uw project te gebruiken / op te nemen. Afhankelijk van de manier, de tactiek om die SVG opnieuw in te kleuren in verschillende staten of omstandigheden
- Inline SVG – SVG-code rechtstreeks insluiten.
HTML: dit is wat je als SVG-afbeelding hebt gekregen dankzij deze XML-code
CSS: de eigenschap Fill kan worden gebruikt om de kleur van SVG te wijzigen, aangezien het is gemaakt met behulp van de HTML-code, dus u moet de kleur van het gemaakte pad SVG wijzigen.
svg { width: 70px; height: 70px;}svg:hover { fill: red;}
2. SVG-symbool / gebruik – Embed een bestand met SVG-code en haal het daar vandaan met USE HTML-tag
HTML: dit is de manier waarop u uw SVG-afbeelding vanuit het andere bestand kunt exporteren met de GEBRUIK HTML-tag.
CSS: dezelfde manier als de eerste veranderde zojuist de exporttechniek, deze techniek wordt gebruikt wanneer je tientallen SVG-afbeeldingen hebt en je je HTML-pagina niet wilt verdringen, dus deze moet in één bestand worden geëxporteerd en je kunt het daar vandaan halen.
svg { width: 70px; height: 70px;}svg:hover { fill: red;}
3. SVG-achtergrondafbeeldingen – stel afbeelding in zoals andere grafische formaten.
Dit is zo simpel als dat u twee afbeeldingen moet oproepen of welke conditie u wilt, afhankelijk van de staat die u hebt geselecteerd.
.icon { background-image: url(icon-black.svg);}
.icon:hover,.icon-bike:focus { background-image: url(icon-red.svg);}
4. CSS-filtereigenschap gebruiken – maar niet veel aanbevolen
Niet aanbevelen omdat het geen ondersteunend gedrag is in een andere browser .
.icon:hover { filter: invert(27\%) sepia(51\%) saturate(2878\%) hue-rotate(346deg) brightness(104\%) contrast(97\%);}
Bedankt, stem alsjeblieft op als dat voor jou werkt.
Veel plezier met leren !!