stroke-dasharray

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

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

Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:

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>

Anwendungshinweise

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

<dasharray>

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

Wenn eine ungerade Anzahl von Werten angegeben ist, wird die Liste der Werte wiederholt, um eine gerade Anzahl von Werten zu erhalten. So ist 5,3,2 gleichwertig mit 5,3,2,5,3,2.

Spezifikationen

No specification found

No specification data found for undefined.
Check for problems with this page or contribute a missing spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

Browser-Kompatibilität

Siehe auch

CSS-Eigenschaft stroke-dasharray