Katakanlah Anda memiliki garis di SVG:
<svg>
<line x1="0" y1="30" x2="500" y2="30" stroke-color="#f8a100" />
</svg>Anda dapat menggunakan stroke-dasharray properti di CSS untuk membuat tanda hubung:
line {
stroke-dasharray: 5;
}Bahwa 5 nilai adalah unit relatif berdasarkan ukuran SVG's viewBox. Kita bisa menggunakan panjang CSS apa pun, sungguh. Tapi yang dilakukan adalah membuat pola garis putus-putus yang panjangnya 5 satuan dengan jarak 5 satuan di antaranya.
Sejauh ini bagus. Kita dapat menggunakan dua nilai di mana nilai kedua secara individual menetapkan panjang celah:
Sekarang kita memiliki tanda hubung yang 5 unit dan celah yang 10. Mari kita coba nilai ketiga:
Lihat bagaimana kita membentuk pola di sini? Ini berjalan:
- Lari: 5 unit
- Kesenjangan: 10 unit
- Lari: 15 unit
Anda akan berpikir itu berulang setelah itu dalam irama yang sama persis. Tapi tidak! Jika ya, kami akan memiliki tanda hubung yang saling bertabrakan:
- Lari: 5 unit
- Kesenjangan: 10 unit
- Lari: 15 unit
- Lari: 5 unit
- Kesenjangan: 10 unit
- Lari: 15 unit
- …dan seterusnya.
Sebaliknya, stroke-dasharray mendapatkan semua pintar dan menduplikasi pola jika ada jumlah nilai ganjil Jadi…
stroke-dasharray: 5 10 15;
/* is the same as */
stroke-dasharray: 5 10 15 5 10 15;Itu sebenarnya mengapa satu nilai berfungsi! Sebelumnya, kami mendeklarasikan single 5 nilai. Itu benar-benar sama dengan mengatakan stroke-dasharray: 5 5. Tanpa nilai kedua, stroke-dasharray secara implisit menduplikasi nilai pertama untuk mendapatkan pola yang dapat diulang. Jika tidak, itu hanya akan menjadi garis putus-putus yang panjangnya 5 unit, tetapi tidak ada celah di antara mereka!
Pola juga tergantung pada ukuran bentuk itu sendiri. SVG kami line adalah 500 unit. Mari kita atur lebih besar stroke-dasharray nilai dan menambahkannya:
stroke-dasharray: 10 20 30 40 50; /* 150 units */Jika pola berjalan empat kali (150 unit 4 iterasi), kita berurusan dengan total 600 unit. 100 unit tambahan itu dipotong untuk mencegah pola meluap dengan sendirinya.
Itu saja.
Ujung topi untuk Tarian Joshua untuk memanggil ini!
