stroke-dasharray

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Das Attribut stroke-dasharray ist ein Präsentationsattribut, das das Muster von Strichen und Lücken definiert, mit dem die Umrisse der Form gezeichnet werden.

Hinweis: Als Präsentationsattribut hat stroke-dasharray auch ein entsprechendes CSS-Attribut: stroke-dasharray. Wenn beide angegeben sind, hat das CSS-Attribut Vorrang.

Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:

Beispiel

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 30 12" xmlns="http://www.w3.org/2000/svg">
  <style>
    line {
      stroke: black;
    }
  </style>
  <!-- No dashes nor gaps -->
  <line x1="0" y1="1" x2="30" y2="1" />

  <!-- Dashes and gaps of the same size -->
  <line x1="0" y1="3" x2="30" y2="3" stroke-dasharray="4" />

  <!-- Dashes and gaps of different sizes -->
  <line x1="0" y1="5" x2="30" y2="5" stroke-dasharray="4 1" />

  <!-- Dashes and gaps of various sizes with an odd number of values -->
  <line x1="0" y1="7" x2="30" y2="7" stroke-dasharray="4 1 2" />

  <!-- Dashes and gaps of various sizes with an even number of values -->
  <line x1="0" y1="9" x2="30" y2="9" stroke-dasharray="4 1 2 3" />

  <!-- Dashes starting with a gap -->
  <line x1="0" y1="11" x2="30" y2="11" stroke-dasharray="0 4 0" />
</svg>

Nutzungshinweise

Wert	`none` \| `<dasharray>`
Standardwert	`none`
Animierbar	Ja

<dasharray>

Eine Liste von durch Kommas und/oder Leerzeichen getrennten <length>s und <percentage>s, die die Längen der abwechselnden Striche und Lücken angeben.

Wenn eine ungerade Anzahl von Werten angegeben ist, wird die Liste der Werte wiederholt, um eine gerade Anzahl von Werten zu ergeben. Daher ist 5,3,2 äquivalent zu 5,3,2,5,3,2.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # StrokeDashing

Browser-Kompatibilität

Siehe auch

CSS stroke-dasharray Eigenschaft