Wie funktionieren Stroke-Derarray-Muster

<Svg> <Zeilen-Stroke = " x1="0" x2="500" y1="30" y2="30"> </p> <p> {STRECE-DASHARRAY: 5; 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. </p> <p> Wir können zwei Werte verwenden, der zweite Wert separat die Lückenlänge festlegt: </p> <pre class="brush:php;toolbar:false"> Zeile {Stroke-Diasharray: 5 10; Versuchen wir drei Werte: <pre class="brush:php;toolbar:false"> Zeile {Stroke-Das-Das-Entschuld: 5 10 15; Aber nein! Wenn das passiert, kollidieren Striche miteinander:

• Striche: 5 Einheiten
• LAPS: 10 Einheiten
• Striche: 15 Einheiten
• -Inits: 5 Einheiten
• ° C.

Im Gegensatz dazu wird das Muster intelligent wiederholt, wenn die Anzahl der Werte eine ungerade Zahl ist. Also:

 Stroke-Dasarray: 5 10 15; Zuvor haben wir einen einzelnen Wert <code> 5 </code> deklariert. Dies entspricht tatsächlich zu <code> Stroke-Entschuldarray: 5 5 </code>. Wenn es keinen zweiten Wert gibt, kopieren Sie den ersten Wert, um ein wiederholbares Muster zu erhalten, implizit den ersten Wert, 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!  <p> Dieses Muster hängt auch von der Größe der Form selbst ab. Unsere SVG -Linie beträgt 500 Einheiten. Setzen wir größere <code> stroke-casharray </code> Werte hinzufügen: </p> <pre class="brush:php;toolbar:false"> Stroke-Dasarray: 10 20 30 40 50; Die zusätzlichen 100 Einheiten werden abgeschnitten, um zu verhindern, dass das Muster selbst überflutet ist.  <p> Das war's. </p> <p> Vielen Dank an Joshua Dance, dass er darauf hingewiesen hat! </p>

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!