The stroke-dasharrayproperti di CSS adalah untuk menciptakan strip di stroke bentuk SVG. Semakin tinggi angkanya, semakin banyak ruang di antara tanda hubung pada goresan.
.module ( stroke-dasharray: 5; )Ingat:
- Ini akan menggantikan atribut presentasi
- Ini tidak akan menimpa gaya sebaris misalnya
Nilai
The stroke-dasharrayproperti dapat menerima setiap panjang, termasuk nilai-nilai unitless:
stroke-dasharray: 2stroke-dasharray: 2.5stroke-dasharray: 2emstroke-dasharray: 15%
Nilai tak bersatuan kemungkinan merupakan pilihan paling umum, karena umumnya dengan nilai SVG. Mereka menjadi satuan panjang yang relatif terhadap sistem koordinat yang dibuat oleh viewBox.
Lihat properti Pen stroke-dasharray oleh CSS-Tricks (@ css-trick) di CodePen.
Menjadi Rumit dengan stroke-dasharray
Pernahkah Anda melihat demo keren di mana bentuk SVG tampak menggambar dirinya sendiri? Itu adalah trik yang mengambil stroke-dasharrayelemen dan menjiwainya sehubungan dengan stroke-dashoffsetproperti.
.path ( stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear forwards; ) @keyframes dash ( to ( stroke-dashoffset: 0; ) )Lihat Contoh Dasar Pena dari Gambar Garis SVG, Mundur dan Maju oleh Chris Coyier (@chriscoyier) di CodePen.
Kami membahas teknik ini secara lebih rinci dalam posting ini. Sepertinya IE 11 dan yang lebih lama tidak suka menganimasikan properti goresan dengan @keyframes, jadi berhati-hatilah di sana.
Terkait
strokestroke-dashoffsetstroke-linecapstroke-width
Informasi Lebih Lanjut
- Spesifikasi SVG 1.1
- MDN pada isian dan guratan
Dukungan Browser
| Chrome | Safari | Firefox | Opera | YAITU | Android | iOS |
|---|---|---|---|---|---|---|
| Iya | Iya | Iya | Iya | 9+ | 4.4+ | Iya |