SVG/Farben/Kontur

Aus SELFHTML-Wiki
< SVG‎ | Farben(Weitergeleitet von Stroke)
Wechseln zu: Navigation, Suche

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
Beachten Sie:

Wenn Sie die Eigenschaft stroke weglassen, wird keine Umrandung dargestellt.

Eine vorherige Wertangabe kann mit stroke="none" aufgehoben werden.

Beispiele für stroke

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).

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.

Beispiel ansehen …
circle {
  fill: #dfac20;
  stroke: #306f91;
  }
#eins {
  stroke-width: 5;
  } 
#zwei {
  stroke-width: 10;
  } 
#drei {
  stroke-width: 20;
  }
Beachten Sie: Die Kreise werden durch die immer größeren Umrandungen insgesamt größer. Dabei verteilt sich die Breite des Rands gleichmäßig innerhalb und außerhalb des Objekts, wie Sie im nächsten Beispiel mit stroke-opacity sehen können.

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.

Beispiel ansehen …
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)

Werte von stroke-linecap; Quelle: https://www.w3.org/TR/SVG2/painting.html#StrokeLinecapProperty

Beispiel ansehen …
line {
  stroke: #306f91;
  stroke-width: 20;
  }
#eins {
  stroke-linecap: butt;
  } 
#zwei {
  stroke-linecap: round;
  } 
#drei {
  stroke-linecap: square;
  }
Beachten Sie: Die Wertangaben 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.

Werte von stroke-linejoin; Quelle:https://www.w3.org/TR/SVG2/painting.html#StrokeLinejoinProperty

Beispiel ansehen …
.spitz {
	stroke-linejoin: miter;
}

.rund {
	stroke-linejoin: round;
}

.bevel {
	stroke-linejoin: bevel;
}
polyline,.line {
  fill: none;	
  stroke: #306f91;
  stroke-width: 40;
  }
Hinweis:
Die Werte miter-clip und arcs sind neu in SVG2 und noch nicht in die Browser implementiert.

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.

Werte für stroke-miterlimit; Quelle: https://www.w3.org/TR/SVG2/painting.html#StrokeMiterlimitProperty

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

eigene Kreation; Quelle: https://css-tricks.com/tight-fitting-svg-shapes#article-header-id-0

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.
Beispiel ansehen …
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;
  }
Im zweiten bis fünften Beispiel wurde die Werte für stroke-miterlimit jeweils so erhöht, dass der Winkel nicht abgeflacht wird.
Je spitzer der Winkel, desto höher muss der Wert für stroke-miterlimit sein.

Siehe auch:

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)


Beispiel ansehen …
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 Werte
  • Prozentwert
  • 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:

Haus vom Nikolaus ansehen …
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]

Hinweis:
Die Eigenschaft stroke-dashcorner ist neu in SVG2 und noch nicht in die Browser implementiert.

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

Beispiel für Stroke-dashcorner

stroke-dashadjust[Bearbeiten]

Hinweis:
Die Eigenschaft stroke-dashadjust ist neu in SVG2 und noch nicht in die Browser implementiert.

Mit der Eigenschaft stroke-dashadjust können Sie bestimmen, inwieweit das Muster einer Strichelung angepasst und wiederholt wird.

Folgende Angaben sind möglich:

  • none: Standardwert
  • stretch: Wenn das Muster nicht ganz in der Pfadlänge aufgeht, werden Striche und Lücken gestreckt
  • compress: Wenn das Muster nicht ganz in der Pfadlänge aufgeht, werden Striche und Lücken gestaucht
  • dashes: Wenn das Muster nicht ganz in der Pfadlänge aufgeht, werden Striche angepasst, Lücken bleiben in der gewählten Einstellung
  • gaps: Wenn das Muster nicht ganz in der Pfadlänge aufgeht, werden Lücken angepasst, Striche bleiben in der gewählten Einstellung

Beispiele für stroke-dashadjust

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ärke
  • non-scaling-stroke: Randlinien behalten trotz Zooms ihre ursprüngliche Stärke
  • non-scaling-size + [ viewport | screen ]
  • non-rotation + [ viewport | screen ]
  • fixed-position + [ viewport | screen ]
  • inherit


Beispiel
<path vector-effect="non-scaling-stroke" stroke-width="2" />
Die Randlinie bleibt immer 2 px breit, egal wie stark gezoomt wird. Dies ist z.B. bei Landkarten, in denen die Randlinie eine Straße darstellen soll, wichtig.
Beachten Sie: Anders als die anderen Kontureneigenschaften wird 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:

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

Beispiel für stroke-alignment und Werte

Hinweis:
Die Eigenschaft stroke-align ist noch nicht in die Browser implementiert. Bei der praktischen Umsetzung bei kreuzenden Linen und spitzen Ecken ist nicht klar, wie Umrandungen außerhalb des Pfades gerendert werden sollen.

Siehe auch[Bearbeiten]

Weblinks[Bearbeiten]

  • W3C: SVG Strokes (First Public Working Draft 09 April 2015)