SVG/Farben/Kontur

Aus SELFHTML-Wiki
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.

  • SVG 1.0
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

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

Inhaltsverzeichnis

[Bearbeiten] stroke-alignment

Hinweis

Die Eigenschaft stroke-alignment ist neu in SVG2 und noch nicht in die Browser implementiert.

Mit der Eigenschaft stroke-alignment können Sie die Ausrichtung der Randlinie bestimmen.

  • SVG 2
  • Leer
  • Leer
  • Leer
  • Leer
  • Leer

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


[Bearbeiten] stroke-width

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
  • eine Prozentangabe, (Standardwert: 1)
  • die Angabe none: keine Umrandung
Beispiel ansehen …
circle {
  fill: #dfac20;
  stroke: #3983ab;
  }
#eins {
  stroke-width: 5px;
  } 
#zwei {
  stroke-width: 10px;
  } 
#drei {
  stroke-width: 20px;
  }
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.

[Bearbeiten] stroke-opacity

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: #3983ab;
  stroke-width: 10px;
  }
#eins {
  stroke-opacity:1;
  } 
#zwei {
  stroke-opacity: .5;
  } 
#drei {
  stroke-width: 20px;
  stroke-opacity: .2;
  }

[Bearbeiten] Enden und Spitzen

[Bearbeiten] stroke-linecap

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: #3983ab;
  stroke-width: 20px;
  }
#eins {
  stroke-linecap: butt;
  } 
#zwei {
  stroke-linecap: round;
  } 
#drei {
  stroke-linecap: square;
  }
Beachten Sie: Die Wertangaben round und square ragen über die Endpunkte hinaus.

[Bearbeiten] stroke-linejoin

Mit der Eigenschaft stroke-linejoin legen Sie fest, wie die Spitzen, die durch das Aufeinandertreffen zweier Pfadsegmente (Knick) entstehen, gezeichnet werden sollen.

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 …
polyline {
  fill: none;	
  stroke: #3983ab;
  stroke-width: 40px;
  }
#eins {
  stroke-linejoin: miter;
  } 
#zwei {
  stroke-linejoin: round;
  } 
#drei {
  stroke-linejoin: bevel;
  }

Hinweis

Die Werte miter-clip und arcs sind neu in SVG2 und noch nicht in die Browser implementiert.

[Bearbeiten] stroke-miterlimit

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: #3983ab;
  stroke-width: 35px;
  }
#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:

[Bearbeiten] Strichelungen

[Bearbeiten] stroke-dasharray

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: #3983ab;
  stroke-width: 5px;
  }
#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.


[Bearbeiten] stroke-dashoffset

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

[Bearbeiten] stroke-dashcorner

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.

  • SVG 2
  • Leer
  • Leer
  • Leer
  • Leer
  • Leer

Folgende Angaben sind möglich:

  • none: keine Angabe (Standardwert)
  • Länge

Beispiel für Stroke-dashcorner

[Bearbeiten] stroke-dashadjust

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.

  • SVG 2
  • Leer
  • Leer
  • Leer
  • Leer
  • Leer

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

[Bearbeiten] Skalierung der Randlinie

[Bearbeiten] vector-effect

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.

  • SVG 2
  • Chrome
  • Firefox
  • Leer
  • Opera
  • Safari

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 ]


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.

Siehe auch:

[Bearbeiten] Anwendungsbeispiele

[Bearbeiten] Weblinks

  • W3C: SVG Strokes (First Public Working Draft 09 April 2015)
Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML