Beste Antwort
Es gibt viele verschiedene Möglichkeiten, SVG in Ihrem Projekt zu verwenden / aufzunehmen. Abhängig davon, auf welche Weise die Taktik zum Umfärben dieser SVG in verschiedenen Zuständen oder Zuständen
- Inline-SVG – SVG-Code direkt einbetten.
HTML: Dies ist das, was Sie aufgrund dieses XML-Codes als SVG-Bild erhalten haben.
CSS: Mit der Eigenschaft „Füllen“ kann die Farbe von SVG geändert werden, da sie mit dem HTML-Code erstellt wurde. Daher müssen Sie die Farbe des erstellten Pfad-SVG ändern.
svg { width: 70px; height: 70px;}svg:hover { fill: red;}
2. SVG-Symbol / Verwendung – Betten Sie eine Datei mit SVG-Code ein und rufen Sie sie mithilfe des USE-HTML-Tags
HTML ab. Auf diese Weise können Sie Ihr SVG-Bild aus der anderen Datei mithilfe der exportieren USE HTML-Tag verwenden.
CSS: Genauso wie beim ersten Mal wurde die Exporttechnik dieses -Technik wird verwendet, wenn Sie Dutzende von SVG-Bildern haben und Ihre HTML-Seite nicht überfüllen möchten, sodass diese in eine Datei exportiert werden muss und Sie sie von dort abrufen können.
svg { width: 70px; height: 70px;}svg:hover { fill: red;}
3. SVG-Hintergrundbilder – Stellen Sie das Bild wie bei anderen Grafikformaten ein.
Dies ist so einfach, dass Sie zwei Bilder aufrufen müssen oder welche Bedingung Sie gemäß dem von Ihnen ausgewählten Status wünschen.
.icon { background-image: url(icon-black.svg);}
.icon:hover,.icon-bike:focus { background-image: url(icon-red.svg);}
4. Verwenden der CSS-Filtereigenschaft – Es wird jedoch nicht viel empfohlen.
Nicht empfohlen, da das Verhalten in einem anderen Browser nicht unterstützt wird .
.icon:hover { filter: invert(27\%) sepia(51\%) saturate(2878\%) hue-rotate(346deg) brightness(104\%) contrast(97\%);}
Danke, bitte stimmen Sie ab, wenn dies für Sie funktioniert.
Viel Spaß beim Lernen !!