SVG Verlaufen

Ein SVG-Farbverlauf kann als glatter Übergang von einer Farbe zur anderen definiert werden. In SVG gibt es zwei Arten von Farbverläufen, nämlich: lineare Farbverläufe und radialer Farbverlauf

Ein SVG-Farbverlauf ist eine Methode, um Formen mit einer ungleichmäßigen Verteilung von Farben zu füllen. Auf diese Weise kann die Füllung oder die Kontur der Form von einer Farbe zur anderen Farbe wechseln. Für bestimmte Arten von Grafiken sieht das wirklich gut aus.

Farbverlaufbeispiel

Dies ist das Erscheinungsbild, wenn der Farbverlauf auf die Füllung und die Kontur der Form angewendet wird:

Das erste Rechteck hat stets die gleiche Konturfarbe, aber eine Farbverlaufsfüllung von Hellgrün bis Dunkelgrün.
　 　Das zweite Rechteck hat den Farbverlauf sowohl auf die Kontur- als auch auf die Füllfarbe angewendet.
　 　Das dritte Rechteck hat eine Farbverlaufskontur angewendet, aber keine Füllung.
　 　Der vierte Rechteck hat die Farbverlaufsfüllung angewendet, aber keine Kontur.

Es gibt zwei Arten von Verläufen:

1. lineare Farbabtönung

2. Radialer Verlauf

Die folgenden Abschnitte werden diese beiden Aspekte behandeln.

lineare Farbabtönung

Die lineare Farbabtönung ändert sich von einer Farbe zur anderen auf eine lineare Weise gleichmäßig. Am Anfang dieses Artikels haben Sie einige einfache Beispiele für lineare Farbabtönungen gesehen.

Farben können vertikal, horizontal oder entlang des von Ihnen definierten Vektors variieren. Sie können auch nur einen Teil der Form mit dem Verlauf füllen, anstatt die gesamte Form. Bevor ich fortfahre, hier einige visuelle Beispiele:

Der erste Rechteck verwendet eine vertikale Farbabtönung. Das zweite Rechteck verwendet eine horizontale Farbabtönung. Das dritte Rechteck verwendet einen diagonalen Verlauf (dunkler nach unten rechts). Das vierte Rechteck füllt nur die rechte Hälfte des Rechtecks mit dem Verlauf. Mit der linearen Farbabtönung von SVG sind all das möglich.

lineare Farbabtönung wird verwendet<linearGradient>von dem Element definiert. Dies ist ein Beispiel:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<defs>
　　　　<linearGradient　id="myLinearGradient1"
　　　　　　　　　　　　　　　　　　　　x1="0%"　y1="0%"
　　　　　　　　　　　　　　　　　　　　x2="0%"　y2="100%"
　　　　　　　　　　　　　　　　　　　　spreadMethod="pad">
　　　　　　<stop　offset="0%"　　　stop-color="#00cc00"　stop-opacity="1"/>
　　　　　　<stop　offset="100%"　stop-color="#006600"　stop-opacity="1"/>
　　　　</linearGradient>
　　</defs>
　　<rect　x="10"　y="10"　width="75"　height="100"　rx="10"　ry="10"
　　　　　style="fill:url(#myLinearGradient1);
　　　　　　　　　　　　stroke:　#005000;
　　　　　　　　　　　　stroke-width:　3;"　/></svg>

Wie Sie sehen können,<linearGradient>-element eingebettet sein in<defs>-element eingebettet. Die Definition des Verlaufs muss immer eingebettet sein in<defs>-element, daher können sie später in SVG-Bildern referenziert werden. In diesem Beispiel wird die lineare Farbabtönung durch das CSS-Attribut (fill:url(#myLinearGradient1))） <rect>seinstyleAttribute innerhalb des-Element-Referenz.

Dies<linearGradient>-Elemente haben zwei eingebettete<stop>-von Elementen.<linearGradient>-Elemente steuern, was vor und nach der Anwendung des Gradienten kontrolliert wird (Richtung undspreadMethodAttribute). Die<stop>-Die Elemente steuern die in den Verlauf verwendeten Farben, wie weit die Formfarben beginnen und enden, sowie die Deckkraft des Verlaufs.

Dies ist<linearGradient>-Liste der Eigenschaften des Elements:

Dies ist<stop>Liste der Elementeigenschaften:

Es ist nicht einfach, alle diese Attributbeschreibungen zu behalten. Dies hat ein Bild erstellt, um die Bedeutung dieser Attribute zu erklären:

Dies ist die Definition der linearen Farbabtönung, die mit dem Bild übereinstimmt:

　　　　<svg　xmlns="http://www.w3.org/2000/svg"
　　　　　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<defs>
　　　　　　<linearGradient　id="myLinearGradient1"
　　　　　　　　　　　　　　　　　　　　　　x1="0%"　y1="0%"
　　　　　　　　　　　　　　　　　　　　　　x2="100%"　y2="0%"
　　　　　　　　　　　　　　　　　　　　　　spreadMethod="pad">
　　　　　　　　<stop　offset="10%"　stop-color="#00cc00"　stop-opacity="1"/>
　　　　　　　　<stop　offset="30%"　stop-color="#006600"　stop-opacity="1"/>
　　　　　　　　<stop　offset="70%"　stop-color="#cc0000"　stop-opacity="1"/>
　　　　　　　　<stop　offset="90%"　stop-color="#000099" stop-opacity="1"/>
　　　　　　</linearGradient>
　　　　</defs>
　　　　<rect　x="10"　y="10"　width="500" height="50"　rx="10"　ry="10"
　　　　　　　style="fill:url(#myLinearGradient1); stroke: #005000;
　　　　　　　　　　　　　　stroke-width:　3;"　/>
　　　　</svg>

der erste Farbstop ist #00cc00, wird von10% beginnen, in das Rechteck einzutreten. DaspreadMethodwird auf "pad" gesetzt, der erste Farbton wird auch in das Rechteck gefülltvorersten Farbstopp (0-10%).

von der ersten Farbstop10% der Farbe in den zweiten Farbstop #006600, bis zum Rand des Rechtecks30％.

von der zweiten Farbstop30％ in den dritten Farbabschluss #cc0000 (rot), bis zum Rand des Rechtecks70％.

von der dritten Farbstop70％ in den vierten und letzten Farbabschluss #000099blau), bis90％ von90％ bis zum Rest des Rechtecks, der letzte Farbabschluss (#000099) wird in das Rechteck gefüllt, weilspreadMethod 　 　Diese<linearGradient>Der Attribut des Elements ist auf "pad" gesetzt.

Radialer Verlauf

Radialer Verlauf ist ein Verlauf, bei dem die Farben kreisförmig anstatt linear ändern. Dies ist ein Beispielbild:

Wie Sie sehen können, ändern sich die Farben jetzt in kreisförmiger Weise. Die letzten drei (grünen) Rechtecke ändern sich nur am zentralen Radius der leichtesten Farbe. Das erste grüne Rechteck hat Farben, die vom Mittelpunkt des Rechtecks ausgehen. Das zweite Rechteck verwendet die Mitte der Oberseite des Rechtecks. Das dritte Rechteck hat die obere linke Ecke als Mittelpunkt.

Radialer Verlauf ist mit<radialGradient>von dem Element definiert. Dies ist ein Beispiel:

<svg width="512"　height="120">
<defs>
<radialgradient id="myRadialGradient4" fx="5%" fy="5%" r="65%" spreadmethod="pad"><stop offset="0%" stop-color="#00ee00" stop-opacity="1></stop>
<stop　offset="100%"　stop-color="#006600"　stop-opacity="1></stop>/radialgradient>/defs>
<rect　x="340" y="10"　width="100" height="100"　rx="10"　ry="10" style="fill:url(#myRadialGradient4); stroke: #005000; stroke-width:　3;<//rect>
　　　</svg>

Dieser SVG-Code definiert tatsächlich den vierten Rechteck, der im obigen Beispiel angezeigt wird. Beachten Sie, wie<stop>Verwendung von Elementen zur Definition von Farben wie bei linearer Verlaufsänderung (siehe auch lineare Verlaufsänderung).

Dies ist<radialGradient> 　 　Liste der Attribute des Elements:

Der Mittelpunkt der radialen Farbverläufe ist der Mittelpunkt der farbigen Ausbreitung. Wenn Sie den radialen Farbverlauf als einen Kreis beschreiben, markieren die cx- und cy-Werte den Mittelpunkt dieses Kreises.

Der Fokus der radialen Farbverläufe ist der "Winkel" der farbigen Strahlung. Wenn Sie den radialen Farbverlauf als eine Lampe betrachten, entscheidet der Fokus den Winkel, unter dem das Licht mit der Form kollidiert.50％,50％ bedeutet direkt von oben.5％,5％ bedeutet von oben links nach unten. Der Farbverlauf sieht so aus, als würde das Licht auf Ihre Form treffen.

Bevor Sie den Farbverlauf korrekt einstellen, müssen Sie wahrscheinlich zunächst den Mittelpunkt und den Fokus des Farbverlaufs probieren. Ich weiß, dass ich dies tue, um diese einfachen Beispiele zu erstellen.

Farbverlaufs-Transformationen

Sie können StandardSVG-TransformationenFunktion um die Farbverläufe zu transformieren. Dies geschieht mitgradientTransformEigenschaften, egal ob<linearGradient>und 　 　 <radialGradient>。Dies ist ein Beispiel：

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<defs>
　　　　<linearGradient　id="myLinearGradient1"
　　　　　　　　　　　　　　　　　　　　x1="0%"　y1="0%"
　　　　　　　　　　　　　　　　　　　　x2="0%"　y2="100%"
　　　　　　　　　　　　　　　　　　　　spreadMethod="pad"gradientTransform="rotate(45)"
　　　　>
　　　　　　<stop　offset="0%"　　　stop-color="#00cc00"　stop-opacity="1"/>
　　　　　　<stop　offset="100%"　stop-color="#006600"　stop-opacity="1"/>
　　　　</linearGradient>
　　</defs>
　　<rect　x="10"　y="10"　width="75"　height="100"　rx="10"　ry="10"
　　　　　style="fill:url(#myLinearGradient1);
　　　　　　　　　　　　stroke:　#005000;
　　　　　　　　　　　　stroke-width:　3;"　/></svg>

Dieser Beispiel definiert mitgradientTransform() 　lineare Verlaufen der Eigenschaft, das Verlaufen dreht45Grad. Normalerweise wird das Verlaufen von oben nach unten skaliert, aber jetzt durch Drehen von oben rechts nach unten links.

Nach dem Ausführen der Bildwirkung: