Angenommen, Sie haben eine Zeile in SVG:
<svg>
<line x1="0" y1="30" x2="500" y2="30" stroke-color="#f8a100" />
</svg>
Sie können die Verwendung stroke-dasharray
Eigenschaft in CSS, um Bindestriche zu machen:
line {
stroke-dasharray: 5;
}
Dass 5
value ist eine relative Einheit basierend auf der Größe der SVGs viewBox
. Wir könnten wirklich jede CSS-Länge verwenden. Aber was es macht, ist ein Muster von Strichen, die 5 Einheiten lang sind und 5 Einheiten Lücken dazwischen haben.
So weit, ist es gut. Wir können zwei Werte verwenden, wobei der zweite Wert individuell die Lückenlänge festlegt:
Jetzt haben wir Striche mit 5 Einheiten und Lücken mit 10 Einheiten. Versuchen wir es mit einem dritten Wert:
Sehen Sie, wie wir hier ein Muster bilden? Es geht:
- Dash: 5 Einheiten
- Abstand: 10 Einheiten
- Dash: 15 Einheiten
Man könnte meinen, es wiederholt sich danach in genau derselben Kadenz. Aber nein! Wenn dies der Fall wäre, hätten wir Striche, die aneinander stoßen:
- Dash: 5 Einheiten
- Abstand: 10 Einheiten
- Dash: 15 Einheiten
- Dash: 5 Einheiten
- Abstand: 10 Einheiten
- Dash: 15 Einheiten
- …und so weiter.
Stattdessen stroke-dasharray
wird ganz schlau und dupliziert das Muster, wenn es eine ungerade Anzahl von Werten gibt Also …
stroke-dasharray: 5 10 15;
/* is the same as */
stroke-dasharray: 5 10 15 5 10 15;
Das ist eigentlich der Grund, warum ein einzelner Wert funktioniert! Früher haben wir eine Single deklariert 5
Wert. Das ist wirklich dasselbe wie zu sagen stroke-dasharray: 5 5
. Ohne den zweiten Wert stroke-dasharray
dupliziert implizit den ersten Wert, um ein wiederholbares Muster zu erhalten. Andernfalls wäre es nur eine durchgezogene Linie von Strichen, die 5 Einheiten lang sind, aber keine Lücken dazwischen!
Das Muster hängt auch von der Größe der Form selbst ab. Unser SVG line
beträgt 500 Einheiten. Setzen wir größer stroke-dasharray
Werte und addiere sie:
stroke-dasharray: 10 20 30 40 50; /* 150 units */
Wenn das Muster viermal ausgeführt wird (150 Einheiten ⨉ 4 Iterationen), haben wir es mit insgesamt 600 Einheiten zu tun. Diese zusätzlichen 100 Einheiten werden abgeschnitten, um zu verhindern, dass das Muster überläuft.
Das ist alles.
🎩Hutspitze an Joshua Tanz für das ausrufen!