Risposta migliore
Ci sono molti modi diversi per usare / includere SVG nel tuo progetto. A seconda del modo in cui, la tattica per ricolorare tale SVG in stati o condizioni differenti
- SVG in linea: incorpora direttamente il codice SVG.
HTML: questo è ciò che hai ottenuto come immagine SVG grazie a questo codice XML
CSS: la proprietà Fill può essere utilizzata per modificare il colore di SVG, poiché viene creata utilizzando il codice HTML, quindi è necessario modificare il colore del percorso SVG creato.
svg { width: 70px; height: 70px;}svg:hover { fill: red;}
2. Simbolo SVG / Usa – Incorpora il file del codice SVG e recuperalo da lì utilizzando il tag USE HTML
HTML: questo è il modo in cui puoi esportare la tua immagine SVG dallaltro file utilizzando il USA il tag HTML.
CSS: allo stesso modo del primo ha appena cambiato la tecnica di esportazione questo viene utilizzata quando hai dozzine di immagini SVG e non vuoi riempire la tua pagina HTML, quindi questa deve essere esportata in un file e puoi recuperarla da lì.
svg { width: 70px; height: 70px;}svg:hover { fill: red;}
3. Immagini di sfondo SVG: imposta limmagine come altri formati grafici.
Questo è tanto semplice quanto devi chiamare due immagini o quale condizione desideri in base allo stato selezionato.
.icon { background-image: url(icon-black.svg);}
.icon:hover,.icon-bike:focus { background-image: url(icon-red.svg);}
4. Utilizzo della proprietà del filtro CSS – Ma non molto consigliato
Sconsigliato perché non supporta il comportamento su un browser diverso .
.icon:hover { filter: invert(27\%) sepia(51\%) saturate(2878\%) hue-rotate(346deg) brightness(104\%) contrast(97\%);}
Grazie, per favore vota se funziona per te.
Buon apprendimento !!