SVG/Farben/Kontur
Mit der Eigenschaft stroke legen Sie eine Farbe für die Kontur oder Randlinie eines Objekts oder Pfades fest. Daneben dient stroke als virtueller Stift, dessen Aussehen sich durch weitere Eigenschaften verändern lässt.
Erlaubt sind dabei folgende Werte:
- eine Farbangabe
- die Angabe
none: keine Umrandung (Standardwert) - die Angabe
currentColor, weist den Browser an einen festgelegten Standardfarbwert zu verwenden
Wenn Sie die Eigenschaft stroke weglassen, wird keine Umrandung dargestellt.
Eine vorherige Wertangabe kann mitstroke="none" aufgehoben werden.
Der Pfadverlauf der Randlinie ist mit gelb markiert. Die 32 Pixel breite, dunkelblaue Randlinie folgt diesem Pfad. Wenn Sie die Randlinie eines Pfades oder Objekts mit stroke-width vergrößern, wird das Objekts insgesamt größer. Dabei verteilt sich die Breite des Rands gleichmäßig innerhalb und außerhalb des Objekts, wie Sie auch im Beispiel mit stroke-opacity sehen können. Eine Ausrichtung der Randlinie mit stroke-alignment wird erst in SVG 2 möglich sein.
Bei einzelnen Linien und nicht geschlossenen Pfaden wird die Länge durch die Breite der Randlinie verlängert (siehe stroke-linecap).
Inhaltsverzeichnis
stroke-width[Bearbeiten]
Die Eigenschaft stroke-width legt die Stärke einer Linie (also auch einer Umrandung) fest.
Erlaubt sind dabei folgende Werte:
- eine nicht-negative Längenangabe (Standardwert: 1)
- eine Prozentangabe, bezogen auf die Quadratwurzel des Durchschnitts aus den Quadraten von Länge und Breite
- die Angabe
none: keine Umrandung
Die Angabe none wird vom Browser stattdessen als stroke: none; interpretiert. Die Breite der Linie wird dadurch nicht verändert. Wird also später stroke auf eine Farbe gesetzt, wird die zuletzt gesetzte Linienstärke verwendet.
circle {
fill: #dfac20;
stroke: #306f91;
}
#eins {
stroke-width: 5;
}
#zwei {
stroke-width: 10;
}
#drei {
stroke-width: 20;
}
stroke-opacity[Bearbeiten]
Mit der Eigenschaft stroke-opacity (engl. für Deckkraft) lässt sich über den Alphakanal der Grad der Transparenz der Umrandung steuern.
Erlaubt ist dabei ein Zahlenwert zwischen 0 und 1. Ein Wert von eins bedeutet dabei eine 100 %ige Deckkraft, also keinerlei Transparenz, ein Wert von null entsprechend keinerlei Deckfähigkeit, also vollständige Transparenz.
circle {
fill: #dfac20;
stroke: #306f91;
stroke-width: 10;
}
#eins {
stroke-opacity:1;
}
#zwei {
stroke-opacity: .5;
}
#drei {
stroke-width: 20;
stroke-opacity: .2;
}
Enden und Spitzen[Bearbeiten]
stroke-linecap[Bearbeiten]
Die Eigenschaft stroke-linecap kann das Aussehen von Linien- und Pfadenden verändern.
Folgende Angaben sind möglich:
butt: rechteckige, an den Endpunkten beschnittene Enden (Standardwert)round: abgerundete Enden (über die Endpunkte hinaus)square: rechteckige Enden (über die Endpunkte hinaus)
line {
stroke: #306f91;
stroke-width: 20;
}
#eins {
stroke-linecap: butt;
}
#zwei {
stroke-linecap: round;
}
#drei {
stroke-linecap: square;
}
round und square ragen über die Endpunkte hinaus.stroke-linejoin[Bearbeiten]
Mit der Eigenschaft stroke-linejoin legen Sie fest, wie die Spitzen, die durch das Aufeinandertreffen zweier Pfadsegmente (Knick) entstehen, gezeichnet werden sollen. So können Sie bei Dreiecken und anderen Formen abgerundete Ecken realisieren.
Folgende Angaben sind möglich:
-
miter: eckige Spitzen, Standardwert; (miter, engl. für Gehrung) miter-clip: SVG2! wie miter, aber bei einer Angabe von stroke-miterlimit wird die Gehrung (miter) abgeschnitten-
round: abgerundete Spitzen -
bevel: abgeschnittene Spitzen; (bevel, engl. für Fase) arcs: SVG2! Die äußeren Ränder der Kontur erhalten dieselbe Krümmung wie der Pfad, sodass ein natürlicheres Aussehen erzielt wird.
.spitz {
stroke-linejoin: miter;
}
.rund {
stroke-linejoin: round;
}
.bevel {
stroke-linejoin: bevel;
}
polyline,.line {
fill: none;
stroke: #306f91;
stroke-width: 40;
}
stroke-miterlimit[Bearbeiten]
Die Wertzuweisung stroke-linejoin: miter erzeugt spitze Linienverbindungen, die für kleine Schnittwinkel eine sehr große Gehrungslänge haben. Mit der Eigenschaft stroke-miterlimit können Sie eine maximale Gehrungslänge festlegen. Würde also eine Spitze länger als die maximale Gehrungslänge werden, ignoriert der Browser die Anweisung miter und stellt den Winkel angefast (bevel) dar.
Folgende Angabe ist nötig:
- eine
Zahl, die gleich oder größer als 1 ist (Standardwert = 4)
Mit dem Standardwert 4 werden Schnittwinkel kleiner als 29° trotz miter angefast (bevel) dargestellt.
Möchten Sie, dass noch spitzere Schnittwinkel nicht abgeschnitten werden, müssen Sie den Wert für stroke-miterlimit deutlich erhöhen.
Falls sich zwei gleichbreite Linien schneiden, ist der Sinus des halben Schnittwinkels θ das Verhältnis von Linienbreite und Gehrungslänge. Es gilt
sin(θ/2) = stroke-width / miterLength
Wenn die miter-Länge geteilt durch die Randlinienstärke (stroke-width) den Wert für stroke-miterlimit übertrifft, dann gilt für:
-
miter: Die Verbindung wird abgeflacht (bevel) dargestellt -
miter-clip: Die Gehrung (miter) wird von einer senkrechten Linie abgeschnitten, die entsprechend dem Wert von stroke-miterlimit vom Schnittpunkt der Linien entfernt ist.
polyline {
fill:none;
stroke: #306f91;
stroke-width: 35;
}
#eins {
stroke-miterlimit: 2;
}
#zwei {
stroke-miterlimit: 3;
}
#drei {
stroke-miterlimit: 6;
}
#vier {
stroke-miterlimit: 7;
}
#fuenf {
stroke-miterlimit: 11;
}
Siehe auch:
- css-tricks: Tight Fitting SVG Shapes, the Present and Future von Ana Tudor
erklärt, welche Probleme die Gehrung von Ecken beim passgenauen Zuschneiden von Objekten verursacht. - codepen.io: stroke-miterlimit-Animation von Ana Tudor
Strichelungen[Bearbeiten]
stroke-dasharray[Bearbeiten]
Mit der Eigenschaft stroke-dasharray können Sie die Umrandung auch gepunktet oder gestrichelt ausführen. Dabei können Sie Länge und Rhythmus der Strichelung frei gestalten.
Folgende Angaben werden erwartet:
none: durchgehende Linie (Standardwert)- komma-separierte Liste von Prozentwerten (jeder zweite Wert gilt als Lücke)
line {
stroke: #306f91;
stroke-width: 5;
}
.eins {
stroke-dasharray:1%, 1%;
}
.zwei {
stroke-dasharray:1%, 5%;
}
.drei {
stroke-dasharray:5%, 2%, 5%, 2%, 1%, 2%;
}
.sos {
stroke-dasharray:1%,1%, 1%,1%, 1%,1%, 3%,1%, 3%,1%, 3%,1%, 1%,1%, 1%,1%, 1%,8%;
}
Im vierten Beispiel wird der Morse-Code für den SOS-Notruf immer wieder wiederholt.
stroke-dashoffset[Bearbeiten]
Mit der Eigenschaft stroke-dashoffset können Sie den Beginn der Umrandung nach vorne oder hinten schieben.
Folgende Angaben werden erwartet:
Länge: (Standardwert ist 1) negative oder positive WerteProzentwert- inherit
Diese Eigenschaft entfaltet ihre volle Wirkung erst bei Animationen, wenn der sichtbare Teil des Strichmusters aus dem Viewport verschoben und dann mit einer Animation „von Zauberhand“ einfliegt:
path {
stroke: #c32e04;
fill: none;
stroke-width: 3;
stroke-dasharray: 900 900;
animation: strokeAni 5s infinite linear;
}
@keyframes strokeAni {
0% {
stroke-dashoffset: 900;
}
100% {
stroke-dashoffset: 0;
}
}
stroke-dashcorner[Bearbeiten]
Mit der Eigenschaft stroke-dashcorner können Sie die Darstellung der gestrichtelten Linie in den Ecken gestalten.
Folgende Angaben sind möglich:
- none: keine Angabe (Standardwert)
Länge
stroke-dashadjust[Bearbeiten]
Mit der Eigenschaft stroke-dashadjust können Sie bestimmen, inwieweit das Muster einer Strichelung angepasst und wiederholt wird.
Folgende Angaben sind möglich:
none: Standardwertstretch: Wenn das Muster nicht ganz in der Pfadlänge aufgeht, werden Striche und Lücken gestrecktcompress: Wenn das Muster nicht ganz in der Pfadlänge aufgeht, werden Striche und Lücken gestauchtdashes: Wenn das Muster nicht ganz in der Pfadlänge aufgeht, werden Striche angepasst, Lücken bleiben in der gewählten Einstellunggaps: Wenn das Muster nicht ganz in der Pfadlänge aufgeht, werden Lücken angepasst, Striche bleiben in der gewählten Einstellung
Skalierung der Randlinie[Bearbeiten]
vector-effect[Bearbeiten]
Die Eigenschaft vector-effect legt fest, ob Randlinien beim Zoomen skaliert werden oder nicht. Der Wert non-scaling-stroke wurde aus SVG-Tiny 1.2 übernommen und ist in allen Browsern außer dem IE implementiert. Die anderen Werte werden noch nicht unterstützt.
Folgende Werte sind möglich:
none: (Standardwert) Randlinien verändern beim Zoomen ihre Stärkenon-scaling-stroke: Randlinien behalten trotz Zooms ihre ursprüngliche Stärkenon-scaling-size + [ viewport | screen ]non-rotation + [ viewport | screen ]fixed-position + [ viewport | screen ]inherit
<path vector-effect="non-scaling-stroke" stroke-width="2" />
vector-effect nicht implizit an Kindelemente vererbt, sondern muss für jedes Kindelement einzeln gesetzt werden. Das Setzen beispielsweise in einem g- oder svg-Element hat somit keinen direkten Effekt, allerdings kann in diesem Fall bei Kindelementen inherit verwendet werden.Siehe auch:
- cllmenick: SVG Vector Effects
stroke-align[Bearbeiten]
Mit der Eigenschaft stroke-align können Sie künftig die Ausrichtung der Randlinie bestimmen.
Details: caniuse.com
Folgende Werte sind möglich:
- center: (Standardwert) Randlinie liegt mittig, Objekt wird um Randbreite größer
- inside: die Randlinie liegt innen; Objekt vergößert sich nicht
- outside: Randlinie liegt außen; Objekt wird um doppelte Randbreite größer
Siehe auch[Bearbeiten]
- SVG/Tutorials/Text (Text-Effekte mit SVG)
Weblinks[Bearbeiten]
- W3C: SVG Strokes (First Public Working Draft 09 April 2015)
stroke-miterlimitjeweils so erhöht, dass der Winkel nicht abgeflacht wird.Je spitzer der Winkel, desto höher muss der Wert für
stroke-miterlimitsein.