Najlepsza odpowiedź
Istnieje wiele różnych sposobów wykorzystania / dołączenia SVG do projektu. W zależności od sposobu, taktyka zmiany koloru tego pliku SVG w różnych stanach lub stanach
- Wbudowany SVG – Osadź kod SVG bezpośrednio.
HTML: Oto, co otrzymałeś jako obraz SVG dzięki temu kodowi XML.
CSS: Właściwość Fill może być użyta do zmiany koloru SVG, ponieważ jest tworzony za pomocą kodu HTML, więc musisz zmienić kolor utworzonej ścieżki SVG.
svg { width: 70px; height: 70px;}svg:hover { fill: red;}
2. Symbol / użycie SVG – Osadź plik z kodem SVG i pobierz go stamtąd za pomocą znacznika USE HTML
HTML: W ten sposób możesz wyeksportować obraz SVG z innego pliku za pomocą UŻYJ tagu HTML.
CSS: Tak samo, jak w przypadku pierwszego, zmieniono technikę eksportowania, jest używana, gdy masz dziesiątki obrazów SVG i nie chcesz tłoczyć swojej strony HTML, więc musisz ją wyeksportować w jednym pliku i możesz go stamtąd pobrać.
svg { width: 70px; height: 70px;}svg:hover { fill: red;}
3. Obrazy tła SVG – ustaw obraz tak jak inne formaty graficzne.
To jest tak proste, jak wywołanie dwóch obrazów lub żądanego stanu zgodnie z wybranym stanem.
.icon { background-image: url(icon-black.svg);}
.icon:hover,.icon-bike:focus { background-image: url(icon-red.svg);}
4. Korzystanie z właściwości filtru CSS – ale niezbyt zalecane
Nie polecam, ponieważ nie wspiera działania w innej przeglądarce .
.icon:hover { filter: invert(27\%) sepia(51\%) saturate(2878\%) hue-rotate(346deg) brightness(104\%) contrast(97\%);}
Dziękuję, proszę, zagłosuj, jeśli to działa w Twoim przypadku.
Miłej nauki !!