stroke-dasharray

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

none

Der Strich wird ohne Unterbrechungen gezeichnet. Der Standardwert.

<number>

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

<length>

Pixeleinheiten werden genauso wie SVG-Einheiten behandelt (siehe <number>, oben), und schriftbasierte Längen wie em werden relativ zum SVG-Wert des Elements für die Schriftgröße berechnet; die Effekte anderer Längeneinheiten können vom Browser abhängen. Negative Werte sind ungültig.

<percentage>

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

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

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

Dieses Beispiel zeigt die grundlegende Nutzung der stroke-dasharray Eigenschaft mit durch Leerzeichen getrennten <number> Werten.

HTML

Zuerst definieren wir eine einfache SVG-Rechteckform. Auf 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 Strich, gefolgt von fünf Einheiten Raum. Dies 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 macht, wird das Muster fortgesetzt. An der oberen linken Ecke, wo Anfang und Ende des Strichs aufeinandertreffen, scheint der zehn Einheiten lange Anfangsstrich mit dem Teil des Strichmusters am Ende des Pfades zu verschmelzen und eine Linie zu bilden, die länger als zehn Einheiten um die Ecke gebogen scheint.

Dieses Beispiel beinhaltet eine ungerade Anzahl komma-getrennter <number> Werte, um zu demonstrieren, wie der Wert wiederholt wird, wenn eine ungerade Anzahl von Werten angegeben ist, um eine gerade Anzahl von Werten einzustellen.

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, was fünf Einheiten Strich, fünf Einheiten Lücke und eine Einheit Strich bedeutet. Da dies jedoch eine ungerade Anzahl von Zahlen ist, wird der gesamte Satz von Zahlen wiederholt, wodurch ein dem zweiten Rechteck identischer Wert entsteht.

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 an Zahlen erforderlich ist, besteht darin, dass jedes Strichmuster mit einem Strich beginnt und mit einer Lücke endet. So besteht das definierte Muster aus einem fünf Einheiten langen Strich, einer fünf Einheiten breiten Lücke, einem eine Einheit langen Strich, einer fünf Einheiten breiten Lücke, einem fünf Einheiten langen Strich und einer eine Einheit breiten Lücke. Im resultierenden Strich zeigt jede Instanz einer einheitlich breiten Lücke zwischen zwei fünf Einheiten langen Strichen einen Punkt an, an dem das Strichmuster neu beginnt.

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

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

Dieses Mal verwenden wir statt bloßer 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 von den Ergebnissen im vorherigen Beispiel zu unterscheiden.

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