CSS SVG Farbe

„Das SVG ist das Akronym für„ Skalierbare Vektorgrafiken.Es wird zur Definition von vektorbasierten Grafiken verwendet. Es ist eine zweidimensionale Grafik. Wir können diesen SVG verschiedene Farben anwenden. Wir können auch die Farbe des SVG ändern, indem wir über die Maus schweben, indem wir die CSS -Eigenschaften verwenden. Das CSS bietet unterschiedliche Eigenschaften für die Änderung der Farbe von SVG. Wir verwenden diese Eigenschaften zum Färben des SVG in CSS. In diesem Tutorial erklären wir die SVG -Farbe und werden hier einige Beispiele machen, in denen wir die SVG mit verschiedenen Eigenschaften von CSS färben. Schauen Sie sich das Beispiel unten an. Sie werden lernen, wie man das SVG in CSS färbt.”

Beispiel 1

Öffnen Sie den Visual Studio -Code und erstellen Sie eine neue Datei und wählen Sie HTML als Sprache aus, um mit dem Schreiben von HTML mit dem Schreiben von HTML zu beginnen. Die Datei wurde erstellt, und alles, was bleibt, ist die Anhängen der “!Markieren Sie in dieser leeren Datei, die hier erstellt wird, um die Basis -Tags zu erhalten. Wenn Sie anschließend "Eingabetaste" drücken, werden alle grundlegenden Tags der HTML in der Datei angezeigt. In dem Körper beginnen wir mit dem Codierungsprozess. Wir platzieren eine Überschrift und das "SVG" -Tag. Dieses „SVG“ -Tag wird hier zum Definieren des Containers für das SVG -Bild verwendet. Wir setzen den „Kreis“ in das „SVG“ -Tag, um einen SVG -Kreis zu erstellen. Und schließen Sie dann das "SVG" -Tag. Jetzt erstellen wir die CSS -Datei und beginnen mit der Codierung in der CSS -Datei, um Farbe auf diesen SVG -Kreis anzuwenden. Wir verknüpfen auch die CSS -Datei mit dieser aktuellen HTML -Datei, indem wir das Tag "Link" im "Kopf" verwenden.”

Hier ist der CSS -Code, in dem wir die "Breite" des "SVG" als "300px" festgelegt haben und die "Höhe" dieses "SVG" "300px" ist. Wir verwenden hier "Schlaganfall". Wir setzen den "Schlaganfall" als "rot."Wir haben auch die Breite mit der" Schlaganfall-Breite "festgelegt und diese" Schlaganfall "auf" 4px "gesetzt. Jetzt färben wir diesen SVG -Kreis mithilfe der „Füll“ -He Eigenschaft von CSS. Wir verwenden diese Eigenschaft "Füll", wenn wir] jede SVG -Grafik färben. Hier haben wir den SVG -Kreis und fügen diesem SVG -Kreis Farbe hinzu, also verwenden wir die Eigenschaft "Füll". Wir setzen diesen Eigenschaftswert "Füll" als "Gelb".”

Sie können den Kreis im Ausgang sehen; Die Farbe dieses SVG -Kreises ist gelb, da wir diese Farbe mit der Eigenschaft „Füll“ in CSS hinzugefügt haben und der Rand dieses SVG -Kreises in roter Farbe ist, da wir die Eigenschaft „Schlaganfall“ in CSS -Code verwendet haben.

Beispiel 2

Wir erstellen hier zwei Rechteck -SVGs, indem wir das „Div“ platzieren, und in diesem „Div“ haben wir zwei verschiedene „SVGs“."Wir verwenden" Rect ", um ein Rechteck zu erstellen. Hier verwenden wir zwei Rechte. Jetzt werden wir mit den CSS -Eigenschaften verschiedene Farben auf diese Rechteck -SVGs anwenden.

Wir richten alle „Körper“ -Anlemente auf das „Zentrum an."Dann wenden wir die" rote "Farbe auf die Überschrift und" algerisch "an, die wir als" Schriftfamilie "verwenden.Wir stylen auch diesen Übergang zu „kursiv."Die" Höhe "des ersten" RECT1 "SVG ist" 300px ", und die" Breite ", die wir hier verwenden, lautet" 500px "," 500px ". Wir „füllen“ dieses Rechteck mit „gelb“, da es die SVG -Form ist, also verwenden wir hier "Füllung". Dann setzen wir die gleiche Höhe und Breite auf das nächste SVG -Rechteck und „füllen“ dieses Rechteck mit „lila.”

Es gibt zwei SVG -Rechtecke im Ausgang. Wir verwenden die CSS -Eigenschaften zum Färben dieser SVG -Rechtecke. Beide Rechtecke sind SVGs.

Beispiel 3

In diesem Code erstellen wir ein SVG -Polygon, daher verwenden wir das „SVG“ -Tag und erstellen hier ein „Polygon“, indem wir die Punkte des Polygons definieren und dann das „SVG“ -Tag schließen.

Wir verwenden die "algerische" Schriftart und die "lila" Farbe für die Überschrift. Wir setzen die "SVG" "Breite" und "Höhe" als "300px" bzw. "200px". Dann verwenden wir die Eigenschaft "Füll". Wir setzen diese „Füllung“ auf „Pink“, damit die Polygonfarbe „Pink erscheint.„Wir haben auch einige Grenzen für dieses Polygon eingestellt, also verwenden wir„ Schlaganfall “, um die Farbe des Randes zu geben, die wir als„ lila."Wir haben die Breite dieser Grenze festgelegt, indem wir die Eigenschaft" Schlaganfall "verwenden und auf" 5 "gesetzt haben. Dann verwenden wir die „Füllregele“, die zum Bestimmen des Innenteils des Polygons verwendet wird, und setzen Sie sie auf „gleichmäßig.”

Hier sehen Sie einen Stern, der auch als Polygon bezeichnet wird. Dieses Polygon ist das SVG -Polygon, und wir färben dieses SVG -Polygon hier in diesem Beispiel mit der Eigenschaft „Füll“.

Beispiel 4

Wir werden hier drei verschiedene Symbole generieren, also verwenden wir das "I" -Tag in dieser HTML -Datei. Wir geben jedem Symbol unterschiedliche Namen; Wir werden für jedes SVG -Symbol eine andere Farbe festlegen.

Wir haben zuerst das "Symbol", "Breite" und "Höhe" festgelegt und beide werden als "100px" eingestellt. Wir setzen diese Symbole auch in einer Zeile ein, sodass wir die Eigenschaft "Anzeige" verwenden und auf "Inline-Block" setzen."Jetzt geben wir in der" Webkit-Maske "die" URL "des SVG."Auch die" Maskengröße "ist hier" Cover ". Dann werden wir mit Hilfe der Eigenschaft „Hintergrundfarbe“ Farben auf diese SVG-Symbole anwenden. Wir setzen "rot" für das erste SVG -Symbol "Pink" als "Hintergrundfarbe" für das zweite SVG.

Alle drei SVGS-Symbole erscheinen in verschiedenen Farben, da wir diese Farben in CSS einstellen.

Beispiel 5

Hier verwenden wir die "XML" -Version und geben dann hier den Pfad des SVG.

Wir setzen die Farbe dieses Symbols, indem wir die Eigenschaft "Füll" verwenden, da es sich um das SVG -Symbol handelt. Deshalb verwenden wir hier "Fill". Wir setzen es „Schwarz.Diese Ikone erscheinen schwarz. Wir verwenden auch "Schwebe" mit diesem "Symbol" und setzen "Füllen" "Orange". Wenn wir also die Maus über dieses SVG in der "Füllung" von "Hover"."Die" Text-Align "setzt auf" Zentrum "und die" Polsterung ", die wir hier verwenden, ist" 2EM ".

Die erste Ausgabe zeigt sich vor dem Umschwebe, und Sie können feststellen, dass die Farbe dieses SVG -Symbols in Schwarz erscheint, das wir im CSS -Code eingestellt haben, aber wenn wir über dieses SVG die nächste Ausgabe.

In dieser zweiten Ausgabe macht die Farbe des SVG.

Abschluss

Dieses Tutorial wurde erstellt, um Ihnen beim Verständnis der CSS -Eigenschaften zu helfen, die es uns ermöglicht, das SVG zu färben. Dieses Tutorial hat dieses Konzept ausführlich behandelt. Wir haben hier fünf verschiedene Beispiele vorgestellt, in denen wir verschiedene SVGs entwerfen und dann diese SVGs färben, und wir haben die Farbe verschiedener SVGS -Symbole verändert. Wir haben die Ausgänge all dieser Codes in diesem Tutorial bereitgestellt. Wir haben hier zwei Eigenschaften verwendet, um Farbe auf die SVGs anzuwenden, die „Füll-“ und „Hintergrundfarben“ -Förderungen waren, und sie hier ausführlich erklärt haben. Nachdem Sie dieses Tutorial sorgfältig verfolgt haben, hoffe ich, dass Sie SVGs mit diesen Eigenschaften in CSS färben können.