Bästa svaret
Det finns många olika sätt att använda / inkludera SVG i ditt projekt. Beroende på vilket sätt, taktiken för återfärgning av SVG i olika tillstånd eller tillstånd
- Inbyggd SVG – Bädda in SVG-kod direkt.
HTML: Detta är vad du fick som en SVG-bild på grund av den här XML-koden
CSS: Egenskapen Fill kan användas för att ändra SVG-färgen, coz den skapas med HTML-koden, så du måste ändra färgen på den SVG-sökväg som skapats.
svg { width: 70px; height: 70px;}svg:hover { fill: red;}
2. SVG-symbol / användning – Bädda in en SVG-fil och hämta den därifrån med hjälp av ANVÄND HTML-tagg
HTML: Det här är hur du kan exportera din SVG-bild från den andra filen genom att använda ANVÄND HTML-tagg.
CSS: Samma sätt som den första bara ändrade exporttekniken denna -teknik används när du har dussintals SVG-bilder och du inte vill tränga din HTML-sida, så detta måste exporteras i en fil och du kan hämta den därifrån.
svg { width: 70px; height: 70px;}svg:hover { fill: red;}
3. SVG-bakgrundsbilder – ställ in bilden som andra grafiska format.
Detta är så enkelt som att du behöver ringa två bilder eller vilket tillstånd du vill ha enligt det tillstånd du valt.
.icon { background-image: url(icon-black.svg);}
.icon:hover,.icon-bike:focus { background-image: url(icon-red.svg);}
4. Använda CSS-filteregenskap – Men inte mycket rekommenderat
Rekommenderas inte på grund av att det inte stöder beteende i en annan webbläsare .
.icon:hover { filter: invert(27\%) sepia(51\%) saturate(2878\%) hue-rotate(346deg) brightness(104\%) contrast(97\%);}
Tack, tacka gärna om det fungerar för dig.
Njut av lärande !!