Legjobb válasz
Nagyon sokféleképpen lehet használni / beépíteni az SVG-t a projektbe. Az SVG újraszínezésének taktikája különböző állapotokban vagy állapotokban
- Inline SVG – közvetlenül beágyazhatja az SVG kódot.
HTML: Ezt kapta SVG-képként ennek az XML-kódnak köszönhetően
CSS: A Fill tulajdonság használható az SVG színének megváltoztatására, mivel a HTML kód segítségével jön létre, ezért meg kell változtatnia a létrehozott SVG útvonal színét.
svg { width: 70px; height: 70px;}svg:hover { fill: red;}
2. SVG szimbólum / Használat – Beágyazhatja az SVG kód fájlját, és onnan töltse le a USE HTML címke használatával
HTML: Így exportálhatja az SVG képét a másik fájlból a HASZNÁLJ HTML címkét.
CSS: Ugyanúgy, mint az első, az exportáló technikát változtatta meg ez: technikát akkor alkalmazzák, amikor több tucat SVG-kép van, és nem akarja tömöríteni a HTML-oldalát, ezért ezt egy fájlba kell exportálni, és onnan lehívhatja.
svg { width: 70px; height: 70px;}svg:hover { fill: red;}
3. SVG háttérképek – állítsa be a képet, mint a többi grafikus formátumot.
Ez olyan egyszerű, hogy két képet vagy a kívánt állapotot kell meghívnia a kiválasztott állapotnak megfelelően.
.icon { background-image: url(icon-black.svg);}
.icon:hover,.icon-bike:focus { background-image: url(icon-red.svg);}
4. CSS szűrőtulajdonság használata – de nem sok ajánlott
Nem ajánlom, mert nem támogató viselkedés egy másik böngészőben .
.icon:hover { filter: invert(27\%) sepia(51\%) saturate(2878\%) hue-rotate(346deg) brightness(104\%) contrast(97\%);}
Köszönöm, kérem, szavazzon, ha ez beválik Önnek.
Élvezze a tanulást !!