Die SVG 2D -Einführung von HTML5 - Farbdarstellung und Definition Methode

Autor：Eve Cole Aktualisierungszeit：2025-04-11 04:00:03

SVG und Canvas sind gleich, beide verwenden Standard -HTML/CSS -Farbdarstellungsmethoden, und diese Farben können für Füll- und Schlaganfallattribute verwendet werden.

Grundsätzlich gibt es die folgenden Möglichkeiten, um Farben zu definieren :

1. Farbname: Verwenden Sie den Farbnamen Rot, Blau, Schwarz ...

2. RGBA/RGB -Wert: Dies ist auch leicht zu verstehen, z. B. FF0000, RGBA (255.100.100,0,5).

3.. Hexadezimalwert: Eine Farbe, die in Hexadezimal definiert ist, wie #ffffff.

4. Gradientenwert: Dies ist auch der gleiche wie in Leinwand und unterstützt zwei Gradientenfarben: linearer Gradient und Ringgradient. Wie in der Abbildung unten gezeigt:

5. Musterfüllung: Verwenden Sie ein benutzerdefiniertes Muster als Füllfarbe.

Die ersten paar sind sehr einfach. Konzentrieren wir uns auf die beiden Füllfarben in den nächsten beiden.

Linearer Gradient

Linearer Gradient kann verwendet werden, um lineare Gradienten zu definieren, und jede Gradientenfarbekomponente wird unter Verwendung des Stoppelements definiert. Siehe das folgende Beispiel:

<Svg>

<defs>

</lineargradient>

</lineargradient>

#rect1 {fill: url (#gradient1); }

.Stop1 {Stop-Color: Rot; }

.Stop2 {Stop-Color: Black; Stoppoptazität: 0; }

.Stop3 {Stop-Color: Blue; }

]]>

</style>

</defs>

</svg>

In diesem Beispiel müssen wir beachten :

1. Gradientenfarbenelemente müssen in das Defs -Element platziert werden.

2. Sie müssen den ID -Wert für das Gradientenelement festlegen, andernfalls können andere Elemente diesen Gradienten nicht verwenden.

3. Die Gradientenfarbenelemente werden unter Verwendung von Stop definiert, und ihre Eigenschaften können auch mit CSS definiert werden. Es unterstützt Attribute wie Klassen und ID, die durch Standard -HTML unterstützt werden. Andere gängige Attribute sind wie folgt :

Offset -Attribut: Dies definiert den Wirkungsbereich der Elementfarbe, und der Wert dieses Attributs liegt zwischen 0% und 100% (oder 0 bis 1); Normalerweise wird die erste Farbe auf 0%gesetzt und die letzte auf 100%gesetzt.

Stop-Color- Attribut: Dies ist sehr einfach und definiert die Farbe der Elementfarbe.

Immobilien in Stop-Opacity : Definiert die Transparenz der Mitgliederfarben.

X1, Y1, X2, Y2 -Attribute: Diese beiden Punkte definieren die Richtung des Gradienten. Wenn Sie es standardmäßig nicht schreiben, ist es ein horizontaler Gradient. Im obigen Beispiel wird auch ein vertikaler Gradient erstellt.

4. Verwenden Sie Gradientenfarben, wie im Beispiel gezeigt, einfach den Wert zum Füllen oder Schlaganfall in Form von URL (#ID) zu.

5. Wiederverwendung von Gradientenmitgliedern: Sie können auch XLink: HREF verwenden, um sich auf definierte Gradientenmitglieder zu beziehen, sodass das obige Beispiel auch wie folgt umgeschrieben werden kann:

</lineargradient>

Ring -Gradient

Verwenden Sie das radialgradientische Element, um den Ringgradienten zu definieren, oder definieren Sie die Elementfarbe. Siehe Beispiel:

<Svg>

<defs>

</radialgradient>

</radialgradient>

</defs>

</svg>

Aus dem obigen Beispiel, mit Ausnahme des Elementnamens und einigen speziellen Mitgliedern, ist alles andere mit linearem Gradienten, einschließlich der Definition von Stop, in DEFs platziert werden. Es muss auf ID eingestellt werden, verwenden Sie URL (#ID), um Werte usw. zuzuweisen usw. Diese speziellen Mitglieder sind wie folgt:

Offset -Attribut: Dies entspricht dem linearen Gradientenwert, aber die Bedeutung ist unterschiedlich. Im Ring -Gradienten repräsentiert 0% die Mitte des Kreises, was leicht zu verstehen ist.

CX, Cy, R -Attribute: In der Tat ist es leicht zu verstehen. Der Ring ist allmählich. Natürlich müssen Sie das Zentrum und den Radius des Rings definieren. Sie können die Größe und Position des Kreises im obigen Beispiel verstehen.

FX, FY -Attribut: Definiert die Position im Zentrum der Farbe (Fokus), dh die Koordinaten am dichtesten Ort der Gradientenfarbe. Im obigen Beispiel ist die redeströtende Rötung die Mitte des Kreises, was der Standard -Effekt ist. Wenn Sie es ändern möchten, können Sie die FX -Koordinatenwerte festlegen.

Sie müssen jedoch auf die Werte von CX, Cy, R, FX, Fy oben achten. Sie werden feststellen, dass sie alle Dezimalstellen sind. Was sind also die Einheiten?

Dies erfordert, dass Sie zuerst ein anderes verwandtes Attribut verstehen: GradientUnits , das die Koordinateneinheiten definiert, die zum Definieren von Gradientenfarben verwendet werden. Diese Eigenschaft verfügt über 2 verfügbare Werte: UserSpaceonuse und ObjectBoundingBox.

ObjectBoundingBox ist der Standardwert. Die von ihnen verwendeten Koordinaten sind relativ zum Objekt einschließender Box (der Fall, in dem es sich nicht um eine quadratische, umschließende Box handelt, überspringen Sie sie) und der Wertebereich beträgt 0 bis 1. Zum Beispiel der Koordinatenwert von CX und CY im obigen Beispiel (0,25, 0,25). Dies bedeutet, dass die Mitte des Kreises 1/4 der oberen linken Ecke des Gehäuseboxs beträgt, und der Radius von 0,25 bedeutet, dass der Radius 1/4 der Länge des Square -Gehäusesboxs des Objekts beträgt, wie Sie in der Abbildung sehen können.

Benutzerspaceonuse bedeutet, dass absolute Koordinaten verwendet werden. Bei der Verwendung dieser Einstellung müssen Sie sicherstellen, dass die Farbfarb- und Füllobjekte in derselben Position gehalten werden müssen.

Schauen Sie sich das folgende Beispiel an. Beachten Sie, dass der Standardwert der Eigenschaft von GradientUnits eine Objektbekämpfung ist:

<Svg>

<defs>

<radialgradient id = "gradient5"

cx = "0,5" Cy = "0,5" r = "0,5" fx = "0,25" Fy = "0,25">

</radialgradient>

</defs>

<rect x = "10" y = "10" rx = "15" ry = "15"

fill = "url (#gradient5)" stroke = "schwarz" stroke-width = "2"/>

</svg>

Sie werden die Bedeutung des Fokus kennen, indem Sie sich die Renderings ansehen.

Darüber hinaus gibt es Gradientenfarbenelemente und einige Transformationseigenschaften wie GradientTransform , was hier nicht im Mittelpunkt steht, und die Transformation wird später zusammengefasst.

Ein weiteres mögliches Attribut, das verwendet wird, ist die SpreadMethod -Eigenschaft, die das Verhalten definiert, das die Gradientenfarbe annehmen sollte, wenn sie ihren Endpunkt erreicht. Diese Eigenschaft hat 3 optionale Werte: Pad (Standard), reflektieren, wiederholen. Unnötig zu erwähnen, dass Pad ein natürlicher Übergang ist. Verwenden Sie nach Ablauf der Farbfarbe die letzte Elementfarbe, um den verbleibenden Teil des Objekts direkt zu rendern. Refect wird die Gradientenfarbe fortsetzen, aber die Gradientenfarbe wird weiterhin umgekehrt rendern, beginnend von der letzten Farbe bis zur ersten Farbe. Wenn der Endpunkt der Gradientenfarbe erneut erreicht ist, kehren Sie die Reihenfolge um, damit das Objekt auf diese Weise gefüllt wird. Durch Wiederholung kann auch die Gradientenfarbe weiterhin rendern, wird jedoch nicht umgekehrt und wird immer noch immer immer wieder von der ersten Farbe bis zur letzten Farbe rendern. Die Renderings sind wie folgt:

Schauen Sie sich einen Code an, der sich wiederholt wiederholt:

<Svg>

<defs>

<radialgradient ID = "Gradient"

cx = "0,5" Cy = "0,5" r = "0,25" fx = ". 25" fy = ". 25"

SpreadMethod = "Repeat">

</radialgradient>

</defs>

<rect x = "50" y = "50" rx = "15" ry = "15"

fill = "url (#gradient)"/>

</svg>

Texturfüllung

Die Texturfüllung ist auch eine beliebte Ausfüllungsweise. In SVG können Sie Muster verwenden, um eine Textur zu erstellen und dann mit diesem Muster andere Objekte zu füllen. Schauen wir uns das Beispiel direkt an:

<Svg>

<defs>

</lineargradient>

</lineargradient>

</defs>

<defs>

</muster>

</defs>

</svg>

Das Beispiel sieht einfach aus, erstellen Sie ein Muster aus einer Gradientenfarbe und verwenden Sie dann das Muster

Füllen Sie das Rechteck. Beachten Sie hier:

1. Der Effekt ist unterschiedlich, wenn dieses Muster in verschiedenen Browsern gefüllt wird.

Zum Beispiel funktionieren die Beispiele in Firefix und Chrome gleich. Aber wenn Sie die Gradientenfarbe machen

Wenn das Muster in derselben DEFS -Kombination definiert ist, kann Firefox immer noch normal rendern.

Chrome kann jedoch die Gradientenfarbe nicht erkennen, es füllt sie nur mit dem Standardschwarz.

2. Muster muss auch ID definieren.

3. Muster muss auch in DEFs definiert werden.

4. Die Verwendung von Muster besteht auch darin, URL (#ID) direkt zum Füllen oder Schlaganfall zuzuweisen.

Die oben genannten sind alle sehr einfach. Konzentrieren wir uns auf die Koordinatenrepräsentation im Beispiel. Die Koordinaten sind im Muster komplizierter.

Das Muster enthält zwei verwandte Eigenschaften: Musterunits und MusterContentunits Attribute; Beide Eigenschaften haben immer noch nur zwei Werte: ObjectBoundingbox und UserSpaceonuse. Die Bedeutung dieser beiden Werte wurde oben diskutiert. Was hier leicht zu verwirren ist, ist, dass die Standardwerte dieser beiden Eigenschaften unterschiedlich sind, aber wenn Sie die Gründe dafür verstehen, werden Sie feststellen, dass dies sinnvoll ist.

1. Musterunits Attribut

Diese Eigenschaft ist die gleiche wie die GradientUnits -Eigenschaft des Gradienten, und die ObjectBoundingbox wird standardmäßig verwendet. Die von diesem Attribut betroffenen Attribute sind X, Y, Breite und Höhe. Diese vier Attribute definieren den Ausgangspunkt und die Breite des Musters. Beide verwenden relative Werte und möchten im Beispiel horizontale und vertikale Richtungen 4 -mal ausfüllen, sodass sowohl die Breite als auch die Höhe auf 0,25 eingestellt sind.

2. MUSTERCONTENTUNITS -Eigenschaft

Der Standardwert dieser Eigenschaft ist genau das Gegenteil, wobei UserSpaceonuse verwendet wird. Diese Eigenschaft beschreibt das Koordinatensystem der im Muster gezeichneten Formen (z. B. RECT, Kreis oben). Das heißt, standardmäßig verwendet die Form, die Sie im Muster zeichnen, ein anderes Koordinatensystem und die Größe/Position des Musters selbst. In Anbetracht des Falls im obigen Beispiel möchten wir ein Rechteck von 200*200 füllen und jede Richtung viermal wiederholen. Dies bedeutet, dass jedes Muster 50*50 beträgt, sodass die beiden Rechtecke und ein Kreis im Muster in diesem 50*50 -Rechteck gezeichnet werden. Auf diese Weise können wir die Koordinaten des Rechtecks und des Kreises im obigen Muster verstehen. Um das Muster in diesem Beispiel zu zentrieren, muss es außerdem vor dem Rendern um 10px ausgeglichen werden. Dieser Wert wird durch die Musternunits -Eigenschaft eingeschränkt, so dass die X- und Y -Werte standardmäßig: 10/2 = 0,05 sind.

Warum setzen Muster die Standardwerte der beiden Attribute wie diesen?

Dies wird durch die Verwendung des Benutzers bestimmt (im obigen Beispiel):

Der erste Musterstil : Ich denke, dies ist der größte Teil der Situation, so dass er als Standardwert verarbeitet wird: Das Muster wird gestreckt, wenn der äußere Diagramm skaliert ist, und egal wie groß das äußere Quadrat ist, das Muster wird immer 4 -mal in beide Richtungen gefüllt. Die im Muster enthaltenen Grafiken werden jedoch nicht gestreckt, da die draußen gefüllten Quadrate skaliert werden. Obwohl es weit hergeholt ist, verstehen Sie es einfach.

Der zweite Musterstil : Die Form im Muster wird auch so gestreckt, dass die Form der Außenkante skaliert ist. Wir können auch den Wert der MusternContentunits -Eigenschaft auf ObjectBoundingBox festlegen, um diesen Effekt zu erzielen. Ändern Sie beispielsweise den Musterteil wie folgt:

</muster>

Nach der Änderung wird auch die Form des Musters, wenn die Größe des gefüllten Rechtecks geändert wird. Und nach der Änderung wird es in die Koordinaten des peripheren Objekts geändert, sodass die X- und Y -Koordinaten des Musters nicht mehr benötigt werden. Das Muster wird immer an die gefüllte Form angepasst.

Der dritte Musterstil : Die Form und Größe des Musters werden festgelegt. Unabhängig davon, wie die peripheren Objekte skaliert sind, können Sie das Koordinatensystem in UserSpaceonuse ändern, um diesen Effekt zu erzielen. Der Code ist wie folgt:

</muster>

Die typischen Muster in diesen 3 sind in der folgenden Abbildung dargestellt:

Praktische Referenz:

Offizielles Dokument: http://www.w3.org/tr/svg11/

Skriptindex: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

Entwicklungszentrum: https://developer.mozilla.org/en/svg

Beliebte Referenz: http://www.chinasvg.com/