Farbe von SVG beim Hover ändern

Es gibt viele verschiedene Möglichkeiten, SVG zu verwenden. Je nachdem, wie Sie es verwenden, unterscheidet sich die Taktik zum Einfärben dieses SVG in verschiedenen Zuständen oder Bedingungen – :hover, :active, :focus, Klassennameänderung usw.

Schauen wir uns die Möglichkeiten an.

Inline-SVG

Inline-SVG ist sowieso meine bevorzugte Art, SVG zu verwenden, teilweise wegen der einfachen Zugänglichkeit und Gestaltung des SVG.

Siehe den Pen
bJXNyy von Chris Coyier (@chriscoyier)
auf CodePen.

Wenn Sie mit Icon-Fonts vertraut sind, wird Ihnen vielleicht gefallen, wie einfach es ist, die Farbe zu ändern. Bei Icon-Fonts sind Sie weitgehend auf eine einzige Farbe beschränkt, während SVG dies nicht ist. Dennoch ist es ansprechend einfach, diese eine Farbe mit color zu ändern. Mit Inline-SVG können Sie fill festlegen, was auf alle Elemente innerhalb des SVG angewendet wird, oder Sie können jedes Element separat füllen, falls erforderlich.

SVG-Symbol / Use

Es gibt so etwas wie einen SVG-Sprite, der eine Gruppe von SVGs ist, die in <symbol>-Elemente umgewandelt werden, sodass jedes gegebene Symbol leicht mit einem <use>-Element referenziert werden kann.

Siehe den Pen
Use SVG Hovers von Chris Coyier (@chriscoyier)
auf CodePen.

Sie können die Füllfarbe auf diese Weise immer noch relativ einfach von außerhalb des CSS festlegen, aber es gibt Einschränkungen.

• Die internen SVG-Elemente (wie das <path>) dürfen keine eigene Füllung haben. Dies ermöglicht, dass die von der übergeordneten SVG festgelegte Füllung in den Shadow DOM gelangt, der von <use> erstellt wird. Sobald Sie etwas wie <path fill="blue" ... /> im <symbol> haben, haben Sie die Kontrolle durch externes CSS verloren.
• Ebenso kann die fill einzelner Elemente nicht innerhalb des SVG gesteuert werden, wie es bei Inline-SVG möglich war. Das bedeutet, dass Sie ziemlich fest im Einzelfarb-Bereich sind. Das deckt sowieso die meisten Anwendungsfälle ab, ist aber dennoch eine Einschränkung.

SVG-Hintergrundbilder

SVG kann als Hintergrundbild gesetzt werden, genau wie PNG, JPG oder jedes andere Grafikformat. An diesem Punkt haben Sie weitgehend aufgegeben, die fill ändern zu können. Eine Möglichkeit, die meiner Meinung nach keine besonders gute ist, besteht darin, zwei Versionen jedes Symbols in den jeweiligen Farben zu haben und zwischen ihnen zu wechseln.

Siehe den Pen
Background SVG Hovers von Chris Coyier (@chriscoyier)
auf CodePen.

Ich mache Ihnen keinen Vorwurf, wenn Sie Quellen nicht wechseln möchten, daher ist eine weitere Möglichkeit, mit Filtern herumzuspielen.

Siehe den Pen
Background SVG Hovers with Filters von Chris Coyier (@chriscoyier)
auf CodePen.

Der Versuch, die richtigen Filter zu finden, um die Farbe richtig einzustellen, ist schwierig. Glücklicherweise hat Barrett Sonntag ein Werkzeug entwickelt, um die Filter für Sie zu berechnen! Aus Schwarz wird Rot mit einer verrückten Kombination wie dieser: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);.

SVG hat auch object, was ziemlich praktisch ist, da es früher eine eingebaute Fallback-Option hatte – obwohl die Browserunterstützung heutzutage so gut ist, dass ich es ehrlich gesagt noch nie benutzt habe. Aber wenn Sie es verwenden, müssten Sie wahrscheinlich diese filter-Technik verwenden, um die Farbe beim Hovern zu ändern.

Siehe den Pen
Background SVG Object Hovers von Chris Coyier (@chriscoyier)
auf CodePen.

Eine Maske anstelle eines Hintergrundbildes verwenden

Auf diese Weise ist das SVG immer noch für das Zeichnen der Form verantwortlich, aber die Farbe stammt von der background-color (oder dem Bild! oder dem Gradienten!) dahinter und nicht vom SVG selbst.

Siehe den Pen
Background SVG Hovers with Mask von Chris Coyier (@chriscoyier)
auf CodePen.

SVG-Hintergrundbilder als Daten-URLs

Das ändert nicht viel im Vergleich zu oben, aber es eröffnet eine interessante Möglichkeit: die Verwendung einer Variablen für die internen Füllungen. Hier mit Sass, das die URLs als Variablen beibehält.

Siehe den Pen
Background SVG Hovers with Data URL variables von Chris Coyier (@chriscoyier)
auf CodePen.

Das können Sie auch mit nativen CSS-Custom-Properties machen!