Wie funktionieren Stroke-Derarray-Muster

stroke-dasharray Eigenschaft von SVG-Linien kann einen gepunkteten Linieneffekt erzeugen. Mal sehen, wie es funktioniert.

Angenommen, Sie haben eine SVG -Linie:

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

Sie können gepunktete Linien mithilfe der stroke-dasharray Eigenschaft in CSS erstellen:

 Linie {
  Stroke-Daasharray: 5;
}

Der Wert 5 ist die relative Einheit, basierend auf der Größe der SVG viewBox . Wir können auch jede CSS -Längeeinheit verwenden. Es erzeugt ein Muster, das aus 5 Einheiten-langen Strichen und 5 Einheiten-langen Lücken besteht.

Wir können zwei Werte verwenden, der zweite Wert legt separat die Lückenlänge fest:

 Linie {
  Stroke-Daasharray: 5 10;
}

Jetzt haben wir 5 Einheiten-lange Striche und 10 Einheiten-Long-Lücken. Versuchen wir drei Werte:

 Linie {
  Stroke-Daasharray: 5 10 15;
}

Sie können sehen, dass wir ein Muster bilden:

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

Sie könnten denken, es wird sich im gleichen Tempo wiederholen. Aber nein! In diesem Fall kollidieren die Armaturenbrettlinien miteinander:

• Dash: 5 Einheiten
• Lücke: 10 Einheiten
• Dash: 15 Einheiten
• Dash: 5 Einheiten
• Lücke: 10 Einheiten
• Dash: 15 Einheiten
• ...usw.

Stattdessen wiederholt stroke-dasharray das Muster intelligent, wenn die Anzahl der Werte eine ungerade Zahl ist. Also:

 Stroke-Daasharray: 5 10 15;

/ * entspricht */
Stroke-Das-abscheulich: 5 10 15 5 10 15;

Dies erklärt tatsächlich, warum auch ein einzelner Wert funktioniert! Vorher haben wir einen einzelnen Wert von 5 deklariert. Dies entspricht tatsächlich stroke-dasharray: 5 5 . Wenn es keinen zweiten Wert gibt, kopieren Sie den ersten Wert implizit den ersten Wert stroke-dasharray um ein wiederholbares Muster zu erhalten. Andernfalls handelt es sich nur um eine durchgezogene Linie, die aus 5 Einheiten-langen Strichen besteht, ohne Lücken zwischen den Strichen!

Das Muster hängt auch von der Größe der Form selbst ab. Unsere SVG -Linie beträgt 500 Einheiten. Setzen wir größere Werte stroke-dasharray Werten ein und fügen Sie sie hinzu:

 Stroke-Derarray: 10 20 30 40 50;

Wenn der Modus viermal läuft (150 Einheiten × 4 Iterationen), verarbeiten wir insgesamt 600 Einheiten. Die zusätzlichen 100 Einheiten werden abgeschnitten, um zu verhindern, dass das Muster selbst überflutet ist.

Das war's.

Vielen Dank an Joshua Dance, dass Sie darauf hingewiesen haben!

Das obige ist der detaillierte Inhalt vonWie funktionieren Stroke-Derarray-Muster. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!