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, das zur Darstellung der Umrandung der Form verwendet wird.
Hinweis:
Als Präsentationsattribut kann stroke-dasharray
als CSS-Eigenschaft verwendet werden. Siehe stroke-dasharray
für mehr Informationen.
Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
Beispiel
<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 spezifizieren.Wenn eine ungerade Anzahl von Werten angegeben wird, wird die Liste der Werte wiederholt, um eine gerade Anzahl von Werten zu erhalten. Somit ist
5,3,2
gleichwertig mit5,3,2,5,3,2
.
Spezifikationen
Specification |
---|
Scalable Vector Graphics (SVG) 2 # StrokeDashing |
Browser-Kompatibilität
Siehe auch
- CSS
stroke-dasharray
Eigenschaft