Wie stroke-dasharray Muster funktionieren

Nehmen wir an, Sie haben eine Linie in SVG

<svg>
  <line x1="0" y1="30" x2="500" y2="30" stroke-color="#f8a100" />
</svg>

Sie können die stroke-dasharray -Eigenschaft in CSS verwenden, um Striche zu erzeugen

line {
  stroke-dasharray: 5;
}

Dieser 5er-Wert ist eine relative Einheit, die auf der Größe der viewBox des SVG basiert. Wir könnten wirklich jede CSS-Länge verwenden. Aber was er tut, ist, ein Muster aus Strichen zu erstellen, die 5 Einheiten lang sind, mit 5 Einheiten Lücken dazwischen.

Bis hierhin alles klar. Wir können zwei Werte verwenden, wobei der zweite Wert individuell die Lückenlänge festlegt.

Jetzt haben wir Striche, die 5 Einheiten lang sind, und Lücken, die 10 Einheiten lang sind. Versuchen wir einen dritten Wert.

Sehen Sie, wie wir hier ein Muster bilden? Es lautet:

• Strich: 5 Einheiten
• Lücke: 10 Einheiten
• Strich: 15 Einheiten

Man würde denken, es wiederholt sich danach in genau demselben Rhythmus. Aber nein! Wenn es das täte, würden die Striche sich berühren.

• Strich: 5 Einheiten
• Lücke: 10 Einheiten
• Strich: 15 Einheiten
• Strich: 5 Einheiten
• Lücke: 10 Einheiten
• Strich: 15 Einheiten
• ...und so weiter.

Stattdessen wird stroke-dasharray 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! Zuvor haben wir einen einzelnen 5er-Wert deklariert. Das ist im Grunde dasselbe wie stroke-dasharray: 5 5 zu sagen. Ohne den zweiten Wert dupliziert stroke-dasharray implizit den ersten Wert, um ein wiederholbares Muster zu erhalten. Andernfalls wäre es nur eine durchgehende 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. Unsere SVG line ist 500 Einheiten lang. Lassen Sie uns größere stroke-dasharray-Werte festlegen und sie addieren.

stroke-dasharray: 10 20 30 40 50; /* 150 units */

Wenn sich das Muster viermal wiederholt (150 Einheiten ⨉ 4 Wiederholungen), beschäftigen wir uns mit insgesamt 600 Einheiten. Diese zusätzlichen 100 Einheiten werden abgeschnitten, um zu verhindern, dass das Muster überläuft.

Das ist alles.

🎩 Hut ab vor Joshua Dance, der dies darauf hingewiesen hat!