Cel mai bun răspuns
Există o mulțime de moduri diferite de a utiliza / include SVG în proiectul dvs. În funcție de ce mod, tactica pentru recolorarea acelui SVG în diferite stări sau condiții
- SVG în linie – Încorporați codul SVG direct.
HTML: Aceasta este ceea ce ați obținut ca imagine SVG datorită acestui cod XML
CSS: Proprietatea Fill poate fi utilizată pentru a schimba culoarea SVG, deoarece este creată utilizând codul HTML, deci trebuie să schimbați culoarea căii SVG create.
svg { width: 70px; height: 70px;}svg:hover { fill: red;}
2. Simbol / Utilizare SVG – Încorporați fișierul codului SVG și preluați-l de acolo utilizând eticheta HTML USE
HTML: Acesta este modul în care puteți exporta imaginea dvs. SVG din celălalt fișier folosind UTILIZAȚI eticheta HTML.
CSS: În același mod în care primul tocmai a schimbat tehnica de export, acest tehnica este utilizată atunci când aveți zeci de imagini SVG și nu doriți să vă aglomerați pagina HTML, deci aceasta trebuie exportată într-un singur fișier și o puteți prelua de acolo.
svg { width: 70px; height: 70px;}svg:hover { fill: red;}
3. Imagini de fundal SVG – setați imaginea ca alte formate grafice.
Acest lucru este la fel de simplu ca și cum trebuie să apelați două imagini sau ce condiție doriți în funcție de starea pe care ați selectat-o.
.icon { background-image: url(icon-black.svg);}
.icon:hover,.icon-bike:focus { background-image: url(icon-red.svg);}
4. Utilizarea proprietății filtrului CSS – Dar nu prea recomandat
Nu recomandăm din cauza faptului că nu este un comportament de susținere pe un alt browser .
.icon:hover { filter: invert(27\%) sepia(51\%) saturate(2878\%) hue-rotate(346deg) brightness(104\%) contrast(97\%);}
Vă mulțumim, vă rugăm să susțineți votul dacă funcționează pentru dvs.
Bucurați-vă de învățare !!