SVG oder skalierbare Vektorgrafiken bieten ein leistungsfähiges Werkzeug zum Erstellen verschiedener Illustrationen und visueller Elemente auf Webseiten. Manchmal ist es jedoch notwendig, die SVG-Farbe zu ändern, damit sie besser mit dem Gesamtdesign der Website übereinstimmt.
Die Änderung der SVG-Farbe kann mit CSS erreicht werden. Mit CSS können wir verschiedene Stile auf Elemente einer Webseite anwenden, einschließlich SVG-Bildern. In dieser exemplarischen Vorgehensweise werden wir die grundlegenden Möglichkeiten zum Ändern der SVG-Farbe mit CSS untersuchen.
Um die SVG-Farbe zu ändern, müssen Sie zunächst das bestimmte SVG-Element angeben, auf das Sie den Stil anwenden möchten. Sie können dazu einen Selektor verwenden id oder class dem SVG-Element zugewiesen. Verwenden Sie dann die Eigenschaft fill in CSS können Sie die gewünschte SVG-Farbe festlegen.
Um beispielsweise die SVG-Farbe von schwarz in rot zu ändern, können Sie den folgenden CSS-Code verwenden:
Darüber hinaus können Sie nicht nur die allgemeine Farbe in CSS verwenden, sondern auch Farbverläufe, Texturen und andere Fülltypen für SVG. Sie können mit verschiedenen Stilen experimentieren, um die für Ihr Design am besten geeignete Website zu finden.
Daher ist das Ändern der SVG-Farbe mit CSS eine einfache und effektive Möglichkeit, Ihren Webseiten ein stilvolleres und moderneres Aussehen zu verleihen. Ich hoffe, dass diese Anleitung Ihnen hilft, diese Fähigkeit zu beherrschen und SVG in Ihren Projekten zu verwenden.
Wie ändere ich die SVG-Farbe in CSS
Hier sind einige Schritte, die Sie befolgen müssen:
- Wählen Sie eine SVG-Datei aus: Suchen Sie das gewünschte SVG-Bild, das Sie bearbeiten möchten.
- Fügen Sie svg in HTML ein: Um svg auf einer Webseite zu verwenden, müssen Sie es zuerst in den HTML-Code einfügen. Um dies zu tun, können Sie ein Tag verwenden und den SVG-Code darin einfügen.
- Fügen Sie der SVG eine Klasse hinzu: Um die SVG-Farbe in CSS ändern zu können, müssen Sie Ihrem SVG-Bild eine Klasse hinzufügen. Fügen Sie dazu dem Tag ein class-Attribut hinzu und weisen Sie ihm einen eindeutigen Klassennamen zu.
- Erstellen Sie Stile in CSS: Öffnen Sie die CSS-Datei und fügen Sie Stile für die ausgewählte SVG-Klasse hinzu. Um beispielsweise die SVG-Farbe in Rot zu ändern, können Sie die folgende Regel verwenden: .your-class-name < fill: red; >. Hier ist your-class-name der Klassenname, den Sie Ihrem svg zugewiesen haben.
- Wenden Sie Stile auf svg an: Um die SVG-Farbe zu ändern, müssen Sie die erstellten Stile auf das SVG-Bild anwenden. Fügen Sie dazu dem Tag ein class-Attribut hinzu und geben Sie den Klassennamen an, den Sie in CSS verwendet haben.
Nachdem Sie nun alle erforderlichen Schritte ausgeführt haben, sollte die Farbe Ihres SVG-Bildes entsprechend den angegebenen Stilen im CSS geändert werden.
Schritt 1: Vorbereiten des SVG-Bildes für die Farbänderung
Bevor wir die Farbe eines SVG-Bildes ändern können, müssen Sie es richtig vorbereiten. Hier sind einige Schritte, die Ihnen helfen, diese Aufgabe zu erledigen:
- Öffnen Sie die SVG-Datei in einem beliebigen Texteditor. Ein SVG-Bild ist eine Textdatei, die XML-Markup enthält.
- Suchen Sie nach dem Element, das Sie Farbe ändern möchten. In den meisten Fällen wird es ein Element sein . Sie können es durch das Attribut d definieren, das die Form und Kontur des Elements definiert.
- Stellen Sie sicher, dass dem Element, für das Sie die Farbe ändern möchten, eine eindeutige ID zugewiesen ist. Fügen Sie dazu dem Element ein ID-Attribut hinzu. zum Beispiel: .
- Speichern Sie die Datei, und schließen Sie den Texteditor.
Jetzt haben Sie ein SVG-Bild, das zum Ändern der Farbe bereit ist. Sie können mit dem nächsten Schritt fortfahren und seine Stile mit CSS anpassen.
Schritt 2: Verwenden Sie die CSS-Eigenschaft fill, um die SVG-Farbe zu ändern
Nachdem Sie SVG-Code zu Ihrer Webseite hinzugefügt haben, können Sie die Farbe mit der CSS-Eigenschaft fill ändern.
Die CSS-Eigenschaft fill definiert die Füllfarbe eines SVG-Elements. Dies kann sowohl eine normale Farbe (z. B. "rot" oder "#ff0000") als auch ein Verweis auf einen Farbverlauf oder ein Füllmuster sein.
Um die Farbe eines SVG-Elements zu ändern, müssen Sie es mit dem CSS-Selektor auswählen. Sie können beispielsweise einem SVG-Element eine Klasse hinzufügen und diese Klasse dann in Ihrer CSS-Datei verwenden, um die Farbe anzuwenden.
Im Folgenden finden Sie einen Beispiel-CSS-Code, der die Farbe eines SVG-Elements mit der Klasse "my-svg" in Rot ändert:
| Selektor | Eigenschaft | Bedeutung |
|---|---|---|
| .my-svg | fill | red |
Sie können die Farbe ändern, indem Sie den Wert der Fill-Eigenschaft durch die gewünschte Farbe ersetzen. Um beispielsweise die Farbe in Blau zu ändern, können Sie den Wert "blue" verwenden.
Schritt 3: Anwenden von CSS-Klassen, um die SVG-Farbe zu ändern
Nachdem wir die Farben als CSS-Variablen oder Eigenschaftswerte definiert haben, können wir sie mithilfe von CSS-Klassen auf das SVG-Element anwenden.
Um die Farbe eines SVG-Bildes mithilfe von Klassen zu ändern, müssen Sie:
- Erstellen Sie CSS-Klassen für jede Farbe, die Sie anwenden möchten.
- Wenden Sie diese Klassen mithilfe des class-Attributs auf das SVG-Element an.
In diesem Beispiel haben wir die Klassen yellow und blue erstellt, um die Farbe eines Kreises und eines Rechtecks in einem SVG-Bild zu ändern.
Im CSS-Stil definieren wir die Eigenschaften für diese Klassen:
.yellow .blue
Wenn Sie jetzt Klassen auf ein SVG-Element anwenden, ändern sich die Farben entsprechend den definierten Werten der CSS-Variablen.
Schritt 4: Ändern der SVG-Farbe mit Filtern in CSS
Wenn Sie die Farbe des SVG-Bildes ändern müssen, können Sie Filter in CSS verwenden. Mit CSS-Filtern können Sie Elemente einer Webseite, einschließlich SVG-Elementen, konvertieren und ändern.
Um die SVG-Farbe zu ändern, müssen Sie die CSS-Eigenschaft filter und den URL-Wert(#elementID) auf Ihr SVG-Element anwenden. Wobei elementID die Kennung des Filters ist, den Sie anwenden möchten.
Es gibt mehrere Filter, mit denen Sie die SVG-Farbe ändern können:
- feColorMatrix: Ermöglicht die Steuerung der Farbmatrix eines Elements
- feTurbulence: erzeugt Rauschen oder Textur
- feColorMatrix: konvertiert die Farbmatrix eines Elements
- feComponentTransfer: steuert die Farbkomponenten eines Elements
Jeder dieser Filter kann verwendet werden, um verschiedene SVG-Farbänderungseffekte zu erzeugen. Mit feColorMatrix können Sie beispielsweise die Farbmatrix ändern, um die Hauptfarbe des svg zu ändern, und mit feComponentTransfer können Sie die Farbkomponenten steuern und den Farbton und die Sättigung anpassen.
.my-svg
Das obige Beispiel verwendet eine Klasse .my-svg zum Anwenden eines Filters mit der ID color-filter auf ein svg-Element.
Um einen Filter zu erstellen, müssen Sie ihn zuerst innerhalb eines Tags mit einem Tag definieren und ihm eine eindeutige ID zuweisen:
Sie können diesen Filter dann auf SVG-Elemente anwenden, indem Sie seine ID im CSS angeben.
Mit CSS-Filtern können Sie die Farbe eines SVG-Bildes leicht ändern und verschiedene Farbänderungseffekte erstellen, um sie an Ihr Design und Ihren Stil anzupassen.
