CSS stroke-dasharray Eigenschaft
Wie man die CSS-Eigenschaft stroke-dasharray verwendet, um gestrichelte Linien für SVG-Elemente zu erstellen. Erklärung der Werte mit Beispielen.
Die Eigenschaft stroke-dasharray steuert das Muster aus Strichen und Lücken, das zum Zeichnen des Umrisses (Stroke) einer SVG-Form verwendet wird. Anstatt einer durchgehenden Linie wird der Stroke in abwechselnde Striche und Lücken aufgeteilt, sodass sich gestrichelte und gepunktete Rahmen, Trennlinien und die Linien für Stroke-Zeichenanimationen erstellen lassen.
Diese Seite erklärt, wie die Werteliste interpretiert wird, die Wiederholungsregel bei ungerader Anzahl von Werten (die die meisten Menschen überrascht), häufige Anwendungsfälle und wie stroke-dasharray mit verwandten Eigenschaften zusammenwirkt.
Wie die Werteliste funktioniert
stroke-dasharray akzeptiert entweder none oder ein <dasharray> — eine Liste aus Längen oder Prozentwerten, die durch Kommas und/oder Leerzeichen getrennt sind. Die Zahlen werden der Reihe nach als Strich, Lücke, Strich, Lücke… gelesen, und die gesamte Liste wiederholt sich entlang des Pfades:
- Ein Wert —
4zeichnet einen Strich der Länge 4, dann eine Lücke der Länge 4, und wiederholt dies. Gleiche Striche und Lücken. - Zwei Werte —
8 2zeichnet einen 8-Einheiten-Strich, eine 2-Einheiten-Lücke, dann wiederholt es sich. Dies ist die gebräuchlichste Form. - Mehrere Werte —
4 1 2 1durchläuft Strich 4, Lücke 1, Strich 2, Lücke 1, und beginnt dann von vorn.
Der entscheidende Punkt: Wenn eine ungerade Anzahl von Werten angegeben wird, wird die Liste verdoppelt, um eine gerade Anzahl zu erhalten. So verhält sich 5 3 2 wie 5 3 2 5 3 2, was bedeutet: Strich 5, Lücke 3, Strich 2, Strich 5, Lücke 3, Strich 2 — die Rollen der einzelnen Zahlen tauschen sich beim zweiten Durchlauf. Verwenden Sie immer eine gerade Anzahl von Werten, wenn Sie ein vorhersehbares, sich wiederholendes Muster wünschen.
Ein Wert von 0 für einen Strich erzeugt in Kombination mit stroke-linecap: round einen Punkt — so werden abgerundete gepunktete Linien erstellt.
Häufige Anwendungsfälle
- Gestrichelte und gepunktete Rahmen oder Trennlinien bei Icons und Illustrationen, bei denen ein CSS-
borderkeinem gekrümmten oder diagonalen Pfad folgen kann. - Linienzeichen-Animationen ("Self-Drawing"), bei denen
stroke-dasharrayauf die Pfadlänge gesetzt wird und stroke-dashoffset von dieser Länge auf0animiert wird, sodass der Stroke scheinbar selbst gezeichnet wird. - Fortschrittsringe und Ladeanimationen, bei denen die Animation von Strich und Offset einen kreisförmigen Stroke sichtbar werden lässt.
CSS-Inline-Styles überschreiben SVG-Präsentationsattribute. Ein Inline-Style stroke-dasharray: 4; hat beispielsweise Vorrang vor dem Präsentationsattribut stroke-dasharray="4".
Die Eigenschaft stroke-dasharray kann sowohl als CSS-Eigenschaft als auch als SVG-Präsentationsattribut verwendet werden. Sie kann auf jedes Element angewendet werden, wirkt sich jedoch nur auf folgende Elemente aus: <altGlyph>, <circle>, <ellipse>, <path>, <line>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref> und <tspan>.
| Standardwert | none |
|---|---|
| Gilt für | Formen und Textelemente. |
| Vererbbar | Ja. |
| Animierbar | Nein. |
| Version | SVG 1.1 Specification |
| DOM-Syntax | Object.strokeDasharray = "none"; |
Syntax
CSS stroke-dasharray Syntax
stroke-dasharray: none | <dasharray> | initial | inherit;Beispiel der stroke-dasharray Eigenschaft:
CSS stroke-dasharray Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Stroke-dasharray property example</h2>
<svg height="80" width="300">
<g fill="none" stroke="black" stroke-width="4">
<path stroke-dasharray="6,6" d="M5 20 l215 0" />
<path stroke-dasharray="8,10" d="M5 40 l215 0" />
<path stroke-dasharray="18,10,6,7,7,10" d="M5 60 l215 0" />
</g>
</svg>
</body>
</html>Ergebnis
Beispiel der stroke-dasharray Eigenschaft mit dem <line> Element:
CSS stroke-dasharray weiteres Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Stroke-dasharray property example</h2>
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="1" x2="30" y2="1" stroke="#1c98c9" />
<line x1="0" y1="3" x2="30" y2="3" stroke="#8ebf42"
stroke-dasharray="3" />
<line x1="0" y1="5" x2="30" y2="5" stroke="#000"
stroke-dasharray="5 1" />
<line x1="0" y1="7" x2="30" y2="7" stroke="#ccc"
stroke-dasharray="4 2 2" />
<line x1="0" y1="9" x2="30" y2="9" stroke="#666"
stroke-dasharray="4 1 3 2" />
</svg>
</body>
</html>In diesem Beispiel verwendet jede <line> ein anderes Muster: eine durchgehende Linie (kein dasharray), dann 3 (gleiche Striche und Lücken), 5 1 (lange Striche, winzige Lücken) sowie die Muster mit ungerader Anzahl 4 2 2 und 4 1 3 2, die sich wie oben beschrieben über zwei Durchläufe wiederholen.
Werte
| Wert | Beschreibung |
|---|---|
| none | Es wird kein Strichmuster verwendet. |
<dasharray> | Es wird ein Strichmuster verwendet. |
| initial | Setzt die Eigenschaft auf ihren Standardwert. |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Verwandte Eigenschaften
stroke-dasharray ist eine von mehreren Eigenschaften, die den SVG-Umriss gestalten. Sie wird häufig kombiniert mit:
- stroke-dashoffset — verschiebt den Startpunkt des Strichmusters; der Schlüssel zu Linienzeichen-Animationen.
- stroke-linecap — steuert die Form der Strichenden (
butt,round,square);roundverwandelt Striche der Länge0in Punkte. - stroke-width — legt die Dicke des Strokes fest.
- stroke — legt die Farbe des Strokes fest.
- fill — legt die Füllfarbe der Form fest.