SVG stroke-Eigenschaft

Die stroke-Eigenschaft definiert die Farbe des Umrisses eines bestimmten Grafikelements. Standardmäßig ist der Wert none.

　Gewöhnlich verwendete Attribute sind:

1. stroke-width

2. stroke-linecap

3. stroke-linejoin

4. stroke-Miterlimit

5. stroke-dasharray + stroke-dashoffset

6. stroke-opacity

Stilattribut

CSS-Style-Attribute stroke und fill spezifizieren die internen Eigenschaften der SVG-Form. Dies ist ein Beispiel:

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">　
<circle　cx="50"　cy="50"　r="50"　style="stroke:　#000066;　fill:　3333ff;"　/>
</svg>

In diesem Beispiel wird eine Kugel mit einem tiefen blauen Strich und einer helleren blauen Füllung definiert.

Strich Beispiel

Der Strich der SVG-Form ist der Kontur der Form. Dies ist ein Beispiel für SVG-Strich:

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink"><circle　cx="50"　cy="50"　r="25"
　　　　　　style="stroke:　#000000;　fill:none;"　/></svg>

In diesem Beispiel wird eine schwarze (#000000) Strichfarbe und kein Füllung definiert. Nach dem Ausführen des Bildes ist der Effekt:

Strich und Füllung (Stroke & Fill) Beispiel

Sie können die SVG-Strich- und Füllfarben kombinieren, um SVG-Formen zu erstellen. Dies ist ein Beispiel für SVG-Strich und Füllung:

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink"><circle　cx="50"　cy="50"　r="25"
　　　　　　　　style="stroke:　#000066;　fill:　#3333ff;"　/></svg>

In diesem Beispiel wird eine tiefe Blau (#000066）Strichfarbe und eine helle Blau (#3333ff) gefüllte Kugel. Nach dem Ausführen des Bildes ist der Effekt:

stroke-width

SVG hat stroke-width definiert das CSS-Attribut der Strichbreite. Dies ist ein SVG stroke-width-Beispiel:

stroke-width:　3px;

In diesem Beispiel wird die Strichbreite auf3Pixel. Sie können Einheiten verwenden, die sich von Pixeln unterscheiden. InAlle verfügbaren Einheiten im SVG-Koordinatensystem in Einheiten der SVG-Koordinatensystem-Unit ansehen。

Dies sind vier verschiedene Beispiele stroke-width：

<svg　width="500"　height="120">
<circle　cx="50"　cy="50"　r="25"
　　　　　　　　style="stroke:　#000066;　fill:　none;stroke-width:　1px;"　/>
<circle　cx="150"　cy="50"　r="25"
　　　　　　　　style="stroke:　#000066;　fill:　none;stroke-width:　3px;"　/>
<circle　cx="250"　cy="50"　r="25"
　　　　　　　　style="stroke:　#000066;　fill:　none;stroke-width:　6px;"　/>
<circle　cx="350"　cy="50"　r="25"
　　　　　　　　style="stroke:　#000066;　fill:　none;stroke-width:　12px;"　/>
</svg>

Nach dem Ausführen der Bildwirkung:

Strichkopf (stroke-linecap)

SVG CSS-Eigenschaft　stroke-linecap definiert, wie die Enden von SVG-Linien dargestellt werden. Das CSS-Attribut stroke-linecap hat drei mögliche Werte. Diese sind:

butt
square
round

Dieser Wert erzeugt eine Linienkappe, die am Ende der Linie präzise abschneidet. Dieser Wert führt dazu, dass die Linienkappe wie butt (abgeschnitten) aussieht, aber leicht über den Endpunkt der Zeile hinausgeht. Dieser Wert führt dazu, dass die Linie eine Oberkante hat.

Hier gibt es drei SVG stroke-linecap zeigt diese drei Beispiele stroke an-Der Wert von linecap (Reihenfolge = butt, square, round):

dieses Beispiel definiert drei grüne Linien, von denen a　stroke-width für10zeichnen, um stroke-die Wirkung der linecap-CSS-Attribut innen jede grüne Linie mit stroke-width　von1dieser Linie hat den gleichen x1, y1und x2, y2Die Koordinaten der grünen Linie sind, aber keine　stroke-linecap-Paket. So können Sie die Wirkung verschiedener stroke-linecap-Werteunterschiede.

Bleistiftlinienverbindung(stroke-linejoin)

Das CSS-Attribut stroke-linejoin definiert, wie die Verbindung zwischen zwei Linien in einer Form gerendert wird. Das CSS-Attribut stroke-linejoin kann einen der drei Werte annehmen. Diese Werte sind:

miter
round
Bevel

Dies sind drei SVG　stroke-linejoin-Beispiel, die diese verschiedenen Werte erläutern:

<svg　width="500"　height="120">
<path　d="M20,100　l20,-50　l20,50"
　　　　　　style="stroke:　#000000;　　　　fill:none;stroke-width:16px;stroke-linejoin:　miter;"　></path>
<text　x="22"　y="20">miter</text>
<path　d="M120,100　l20,-50　l20,50"
　　　　　　style="stroke:　#000000;　　　　fill:none;stroke-width:16px;stroke-linejoin:　round;"　></path>
<text　x="122"　y="20">round</text>
<path　d="M220,100　l20,-50　l20,50"
　　　　　　style="stroke:　#000000;　　　　fill:none;stroke-width:16px;stroke-linejoin:　bevel;"　></path>
<text　x="222"　y="20">Bevel</text>
</svg>

stroke-Miterlimit

style-Schema stroke-Miterlimit-Attribut mit stroke-linejoin zusammen verwendet werden. Wenn stroke-linejoin auf Kante eingestellt, dann stroke-Miterlimit kann verwendet werden, um die Entfernung zwischen den Punkten zu begrenzen, an denen zwei Linien sich kreuzen (der sich ausdehnende Winkel).

Dies ist ein SVG-Stroke-Miterlimit-Beispiel:

<svg　width="500"　height="120">
<path　d="M20,100　l20,-50　l20,50"
　　　　　　style="stroke:　#000000;　　　　fill:none;
　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　stroke-linejoin:　miter;　　　　　　　　　　　　　stroke-Miterlimit:　1.0;
　　　　　　　　　　　　　"　></path>
<text　x="29"　y="20">1.0</text>
<path　d="M120,100　l20,-50　l20,50"
　　　　　　style="stroke:　#000000;　　　　fill:none;
　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　stroke-linejoin:　miter;　　　　　　　　　　　　　stroke-Miterlimit:　2.0;
　　　　　　　　　　　　　"　></path>
<text　x="129"　y="20">2.0</text>
<path　d="M220,100　l20,-50　l20,50"
　　　　　　style="stroke:　#000000;　　　　fill:none;
　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　stroke-linejoin:　miter;　　　　　　　　　　　　　stroke-Miterlimit:　4.0;
　　　　　　　　　　　　　"　></path>
<text　x="229"　y="20">4.0</text>
</svg>

Bitte beachten Sie stroke-Miterlimit, wie drei Pfade mit drei verschiedenen Werten verwendet werden, wenn sie sonst fast gleich aussehen. Nach der Ausführung das Bildergebnis:

Die Länge der Linienverbindung wird als Miter-Länge bezeichnet. Die Miter-Länge wird gemessen von der Innenecke der Verbindungsstriche bis zum spitzen Ende der Verbindungsstriche. In diesem Bild ist die Miter-Länge oben auf den Verbindungsstrichen in Rot dargestellt und wird auf der rechten Seite der Verbindungsstriche wiederholt:

Man kann sich vorstellen, dass eine breitere Strecke einen größeren Winkel zwischen den Verbindungsstrichen ergibt und die Miter-Zeit länger wird.

in stroke-Miterlimit legt tatsächlich einen obere Grenzwert für das Verhältnis zwischen dem Längenverhältnis des Miter und der Stiftbreite fest. Daher stroke-miterlimit ist1.0 bedeutet, dass die maximale Länge des Miter1 x Brushbreite. Der Miter überschreitet diesen Bereich.1.0 ist stroke-miterlimit der kleinsten möglichen Werte.

Hier sind einige Beispiele mit1.0as　stroke-miterlimit-Beispiel, aber die Ecken der Verbindungslinien sind unterschiedlich:

Beachten Sie, dass der abgeschnittene Teil des Winkels größer wird, wenn der Winkel größer ist. Das liegt daran, dass scharfe Ecken natürlich längere Winkel erzeugen.

stroke-dasharray + stroke-dashoffset

SVG CSS-Eigenschaft　stroke-dasharray wird verwendet, um den Stroke der SVG-Formen in Punctuationsdarstellung zu zeichnen. Der Name "Punctuationsarray" kommt daher, dass Sie eine Zahlengruppe als Wert angeben. Diese Werte definieren die Länge der Punctuations und der Leerzeichen. Daher sollten Sie eine gerade Anzahl von Zahlen angeben.

Dies ist ein SVG-Stroke-dasharray-Beispiel:

<svg　width="500"　height="120">
<line　x1="20"　y1="20"　x2="120"　y2="20"
　　　　　　style="stroke:　#000000;　fill:none;
　　　　　　stroke-width:　6px;　　　　　　stroke-dasharray:　10　5"　　/>
</svg>

In diesem Beispiel wird ein mit Punctuationsstrichen versehener Stroke definiert, die Breite der Punctuationsstriche beträgt10Pixel, der Abstand zwischen den Strichen ist5Pixel. Nach dem Ausführen der Bildwirkung:

Hier sind einige Beispiele mit verschiedenen Bindestrichen und Leerzeichenbreiten:

<svg　width="500"　height="120">
<line　x1="20"　y1="20"　x2="120"　y2="20"
　　　　　　style="stroke:　#000000;　fill:none;
　　　　　　stroke-width:　6px;
　　　　　　stroke-dasharray:　10　5　5　5"　　></line>
<line　x1="20"　y1="40"　x2="120"　y2="40"
　　　　　　style="stroke:　#000000;　fill:none;
　　　　　　stroke-width:　6px;
　　　　　　stroke-dasharray:　10　5　5　10"　　></line>
</svg>

Die erste Zeile mit10mit der Breite des Punctuationsstreifens beginnen, dann5Pixel-Abstand, dann5Pixel der Punctuationsstriche, gefolgt von5Pixel eines anderen Abstands. Dann wiederhole das Muster.

Die zweite Zeile mit der Breite des Punctuationsstreifens10beginnt, dann5Pixel-Abstand, dann5Pixel der Punctuationsstriche, gefolgt von10Pixel-Abstand.

Nach dem Ausführen der Bildwirkung:

stroke-dashoffset wird verwendet, um den Abstand zu setzen, an dem das Punctuationsmuster beginnt. Auf diese Weise können Sie ab dem Mittelteil des Musters beginnen, z.B. von der Mitte des Musters beginnen, und dann dort das Muster wiederholen. Dies ist ein SVG-Stroke-dashoffset-Beispiel:

<svg　width="500"　height="120">
<line　x1="20"　y1="20"　x2="170"　y2="20"
　　　　　　style="stroke:　#000000;　fill:none;
　　　　　　stroke-width:　6px;
　　　　　　stroke-dasharray:　10　5;　　　　　　stroke-dashoffset:　5;
　　　　　　"　　/>
</svg>

Dieser Beispielsetzung wird dash gesetzt-offset als5Pixel, was bedeutet, dass die Rendering der Striche mit5Pixel beginnen, das Punctuationsmuster einzugehen (nicht alle Browser unterstützen diese Funktion vollständig). Nach dem Ausführen der Bildwirkung:

stroke-opacity

SVG CSS-Eigenschaft stroke-opacity wird verwendet, um die Opazität des SVG-Formgegensatzes zu definieren. stroke-opacity 0 und1Zehnerzahlen, die näher an 0 sind, sind transparenter. Der Wert, der näher an1daher wird der Stroke immer untransparenter. Der Standardstroke-Der Wert von opacity ist1was eine完全不透明的笔划表示。

Dies ist ein SVG-Stroke-Opacity-Beispiel, das drei Zeilen mit verschiedenen Stroke zeigt-Transparenztext über der Zeile: 

<svg　width="500"　height="120">
　　　　<text　x="22"　y="40">Text　Behind　Shape</text>
　　　　<path　d="M20,40　l50,0"
　　　　　　　　　　style="stroke:　#00ff00;　　　　fill:none;
　　　　　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　　　　　stroke-opacity:　0.3;
　　　　　　　　　　　　　　　　　"　></path>
　　　　<path　d="M80,40　l50,0"
　　　　　　　　　　style="stroke:　#00ff00;　　　　fill:none;
　　　　　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　　　　　stroke-opacity:　0.7;
　　　　　　　　　　　　　　　　　"　></path>
　　　　<path　d="M140,40　l50,0"
　　　　　　　　　　style="stroke:　#00ff00;　　　　fill:none;
　　　　　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　　　　　stroke-opacity:　1;
　　　　　　　　　　　　　　　　　"　></path>
</svg>

Dies ist das generierte Bild. Bitte beachten Sie, dass der hintere Text immer weniger sichtbar wird.