Bagaimana corak stroke-dasharray berfungsi

Katakan anda mempunyai garis SVG:

Kita boleh menggunakan dua nilai, nilai kedua secara berasingan menetapkan panjang jurang:

 line {Stroke-Dasharray: 5 10; Mari kita cuba tiga nilai:  <pre class="brush:php;toolbar:false"> line {stroke-dasharray: 5 10 15; Tetapi tidak! Jika itu berlaku, sengkang akan bertembung antara satu sama lain:  

• Dashes: 5 unit
• Jurang: 10 unit

SO:

 Stroke-Dasharray: 5 10 15; Sebelum ini, kami mengisytiharkan satu nilai <code> 5 </code>. Ini sebenarnya bersamaan dengan <code> Stroke-Dasharray: 5 5 </code>. Jika tiada nilai kedua, <code> stroke-dasharray </code> secara tersirat menyalin nilai pertama untuk mendapatkan corak yang berulang. Jika tidak, ia hanya akan menjadi garis pepejal yang terdiri daripada 5 sengkang panjang unit, tanpa jurang antara sengkang!  <p> Corak ini juga bergantung kepada saiz bentuk itu sendiri. Barisan SVG kami adalah 500 unit. Mari kita tetapkan lebih besar <code> stroke-dasharray </code> nilai dan tambahkannya: </p> <pre class="brush:php;toolbar:false"> Stroke-Dasharray: 10 20 30 40 50; 100 unit tambahan akan dipotong untuk mengelakkan corak itu sendiri daripada melimpah.  <p> Itu sahaja. </p> <p> Terima kasih kepada tarian Joshua kerana menunjuk ini! </p>

Atas ialah kandungan terperinci Bagaimana corak stroke-dasharray berfungsi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!