stroke-dasharray

Syntax

/* Keywords */
stroke-dasharray: none;

/* Numeric, length, and percentage values */
stroke-dasharray: 2px, 5px;
stroke-dasharray: 20%, 50%;
stroke-dasharray: 2, 5;

/* The following two rules are equivalent */
stroke-dasharray: 2, 5, 3;
stroke-dasharray: 2, 5, 3, 2, 5, 3;

/* Global values */
stroke-dasharray: inherit;
stroke-dasharray: initial;
stroke-dasharray: revert;
stroke-dasharray: revert-layer;
stroke-dasharray: unset;

Werte

Der Wert ist eine Liste von durch Kommas und/oder Leerzeichen getrennten <number>, <length> und/oder <percentage> Werten, die die Längen abwechselnder Striche und Lücken oder das Schlüsselwort none spezifizieren. Wenn eine ungerade Anzahl von Werten angegeben wird, wird der gesamte Wert wiederholt, um eine gerade Anzahl von Werten festzulegen.

none

Der Strich wird ohne Striche gezeichnet. Der Standardwert.

<number>

Eine Anzahl von SVG-Einheiten, deren Größe durch den aktuellen Einheitenraum definiert ist. Negative Werte sind ungültig.

<length>

Pixeleinheiten werden genauso gehandhabt wie SVG-Einheiten (siehe <number>, oben) und schriftbasierte Längen wie em werden in Bezug auf den SVG-Wert der Textgröße des Elements berechnet; die Auswirkungen anderer Längeneinheiten können vom Browser abhängen. Negative Werte sind ungültig.

<percentage>

Prozentsätze beziehen sich auf die normalisierte Diagonale des aktuellen SVG-Anzeigeports, die als $\frac{\sqrt{{\mathrm{<width>}}^2+{\mathrm{<height>}}^2}}{\sqrt{2}}$ berechnet wird. Negative Werte sind ungültig.

Formale Definition

Formale Syntax

stroke-dasharray = 
  none                                  |
  [ <length-percentage> | <number> ]+#  

<length-percentage> = 
  <length>      |
  <percentage>  

Beispiele

Einfaches Strichmuster

Dieses Beispiel demonstriert die grundlegende Verwendung der stroke-dasharray Eigenschaft mit Leerzeichen getrennten <number> Werten.

HTML

Zuerst richten wir eine grundlegende SVG-Rechteckform ein. Für dieses Rechteck wird ein roter Strich mit einer Breite von 2 angewendet.

<svg viewBox="0 0 100 50" width="500" height="250">
  <rect
    x="10"
    y="10"
    width="80"
    height="30"
    fill="none"
    stroke="red"
    stroke-width="2" />
</svg>

CSS

Wir definieren ein Strichmuster für den Strich: zehn Einheiten des Strichs, gefolgt von fünf Einheiten des Raums. Das bedeutet, dass die Lücken zwischen den Strichen halb so lang sind wie die Striche selbst.

rect {
  stroke-dasharray: 10 5;
}

Ergebnisse

Wo der Strich eine Ecke dreht, wird das Muster sozusagen mitgeführt. An der oberen linken Ecke, wo der Anfang und das Ende des Strichs aufeinandertreffen, scheint der zehn Einheiten lange Anfangsstrich mit dem Teil des am Ende des Pfades sichtbaren Strichmusters zu verschmelzen und erzeugt somit eine Linie, die länger als zehn Einheiten erscheint und um die Ecke biegt.

Wiederholung des Strichmusters

Dieses Beispiel umfasst eine ungerade Anzahl durch Kommas getrennte <number> Werte, um zu demonstrieren, wie der Wert wiederholt wird, wenn eine ungerade Anzahl von Werten gegeben ist, um eine gerade Anzahl von Werten festzulegen.

HTML

In diesem Fall definieren wir zwei Rechtecke.

<svg viewBox="0 0 100 100" width="500" height="500">
  <rect
    x="10"
    y="10"
    width="80"
    height="30"
    fill="none"
    stroke="red"
    stroke-width="2" />
  <rect
    x="10"
    y="60"
    width="80"
    height="30"
    fill="none"
    stroke="red"
    stroke-width="2" />
</svg>

CSS

Für das erste Rechteck definieren wir ein Strichmuster von 5, 5, 1, das fünf Einheiten Strich, fünf Einheiten Lücke und eine Einheit Strich erfordert. Da dies jedoch eine ungerade Anzahl von Zahlen ist, wird die gesamte Zahlenmenge wiederholt, wodurch ein Wert entsteht, der dem im zweiten Rechteck angewendeten entspricht.

rect:nth-of-type(1) {
  stroke-dasharray: 5, 5, 1;
}
rect:nth-of-type(2) {
  stroke-dasharray: 5, 5, 1, 5, 5, 1;
}

Ergebnis

Der Grund, warum eine gerade Anzahl von Zahlen erforderlich ist, liegt darin, dass jedes Strichmuster mit einem Strich beginnt und mit einer Lücke endet. Somit ist das definierte Muster ein fünf Einheiten langer Strich, eine fünf Einheiten lange Lücke, ein ein Einheiten langer Strich, eine fünf Einheiten lange Lücke, ein fünf Einheiten langer Strich und eine ein Einheiten lange Lücke. Dabei zeigt jede ein Einheiten lange Lücke zwischen zwei fünf Einheiten langen Strichen an, wo das Strichmuster von vorn beginnt.

Prozent- und Pixelwerte

Dieses Beispiel demonstriert die Verwendung von <percentage> und <length> Werten innerhalb des stroke-dasharray Eigenschaftswertes.

HTML

Wie im vorherigen Beispiel definieren wir zwei Rechtecke.

<svg viewBox="0 0 100 100" width="500" height="500">
  <rect
    x="10"
    y="10"
    width="80"
    height="30"
    fill="none"
    stroke="red"
    stroke-width="2" />
  <rect
    x="10"
    y="60"
    width="80"
    height="30"
    fill="none"
    stroke="red"
    stroke-width="2" />
</svg>

CSS

In diesem Fall verwenden wir anstelle von bloßen Zahlen Pixel- und Prozentwerte.

rect:nth-of-type(1) {
  stroke-dasharray: 5px, 5px, 1px;
}
rect:nth-of-type(2) {
  stroke-dasharray: 5%, 5%, 1%;
}

Ergebnisse

Die Ergebnisse sind im Wesentlichen nicht zu unterscheiden von den Ergebnissen im vorherigen Beispiel.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• stroke-dashoffset
• stroke-linecap
• stroke-linejoin
• stroke-miterlimit
• stroke-opacity
• stroke-width
• stroke
• SVG stroke-dasharray Attribut