stroke-dasharray

Der Wert ist eine Liste von durch Kommas und/oder Leerzeichen getrennten <number>, <length> und/oder <percentage> Werten, die die Längen von abwechselnden Strichen und Lücken angeben, oder das Schlüsselwort none. 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 gestricheltes Muster 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 wie SVG-Einheiten behandelt (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-Viewports, die wie folgt berechnet wird: $\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 richten wir eine grundlegende SVG-Rechteckform ein. 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 die Linie: zehn Einheiten Strich, gefolgt von fünf Einheiten Zwischenraum. Das bedeutet, die Lücken zwischen den Strichen sind halb so lang wie die Striche selbst.

rect {
  stroke-dasharray: 10 5;
}

Ergebnisse

Wo der Strich eine Ecke bildet, setzt sich das Muster fort. In der oberen linken Ecke, wo Anfang und Ende des Strichs aufeinandertreffen, scheint der zehn Einheiten lange Anfangstrich mit dem am Ende des Pfades sichtbaren Teil des Strichmusters verbunden zu sein, wodurch es erscheint, als wäre eine längere als zehn Einheiten lange Linie um die Ecke gebogen.

Dieses Beispiel enthält eine ungerade Anzahl von durch Kommas getrennten <number> Werten, um zu zeigen, wie der Wert wiederholt wird, wenn eine ungerade Anzahl von Werten angegeben wird, 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 Dasharray von 5, 5, 1, was fünf Einheiten Strich, fünf Einheiten Lücke und eine Einheit Strich erfordert. Da dies jedoch eine ungerade Anzahl von Zahlen ist, wird der gesamte Satz von Zahlen wiederholt, wodurch ein Wert entsteht, der mit dem beim zweiten Rechteck angewendeten identisch ist.

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 wird das definierte Muster zu einem fünf Einheiten langen Strich, einer fünf Einheiten langen Lücke, einem ein Einheiten langen Strich, einer fünf Einheiten langen Lücke, einem fünf Einheiten langen Strich und einer ein Einheiten langen Lücke. Im resultierenden Strich zeigt jede Instanz einer ein Einheiten langen Lücke zwischen zwei fünf Einheiten langen Strichen an, wo das Strichmuster erneut 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

Diesmal verwenden wir anstelle von alleinstehenden Zahlen Pixel-Einheiten und Prozentsätze.

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