Wie Stroke-Dasharray-Muster funktionieren

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!