Nejlepší odpověď
Existuje mnoho různých způsobů použití / zahrnutí SVG do projektu. V závislosti na tom, jakým způsobem, taktika změny barvy SVG v různých stavech nebo podmínkách
- Vložený SVG – vložte kód SVG přímo.
HTML: To je to, co jste díky tomuto kódu XML získali jako obrázek SVG
CSS: Vlastnost Fill lze použít ke změně barvy SVG, protože je vytvořena pomocí kódu HTML, takže musíte změnit barvu vytvořené cesty SVG.
svg { width: 70px; height: 70px;}svg:hover { fill: red;}
2. Symbol / použití SVG – Vložte soubor SVG kódu a odtud jej načtěte pomocí USE HTML tagu.
HTML: Takto můžete exportovat SVG obrázek z druhého souboru pomocí POUŽÍVEJTE značku HTML.
CSS: Stejným způsobem, jako ten první právě změnil techniku exportu, tento technika se používá, když máte desítky obrázků SVG a nechcete, aby se vaše stránka HTML tiskla, takže je třeba ji exportovat do jednoho souboru a odtud ji načíst.
svg { width: 70px; height: 70px;}svg:hover { fill: red;}
3. Obrázky na pozadí SVG – nastavte obrázek jako jiné grafické formáty.
Je to tak jednoduché, že potřebujete zavolat dva obrázky nebo jakou podmínku chcete podle zvoleného stavu.
.icon { background-image: url(icon-black.svg);}
.icon:hover,.icon-bike:focus { background-image: url(icon-red.svg);}
4. Použití vlastnosti filtru CSS – ale moc se nedoporučuje
Nedoporučuje se, protože to není podpůrné chování v jiném prohlížeči .
.icon:hover { filter: invert(27\%) sepia(51\%) saturate(2878\%) hue-rotate(346deg) brightness(104\%) contrast(97\%);}
Děkujeme, prosím, hlasujte, pokud to pro vás funguje.
Užijte si učení !!