The stroke-dasharrayharta di CSS adalah untuk mewujudkan sengkang dalam lejang bentuk SVG. Semakin tinggi bilangannya, semakin banyak ruang di antara tanda sempang pada strok.
.module ( stroke-dasharray: 5; )Ingat:
- Ini akan mengatasi atribut persembahan
- Ini tidak akan mengatasi gaya sebaris misalnya
Nilai
Tempat stroke-dasharraypenginapan ini boleh menerima panjang, termasuk nilai tanpa unit:
stroke-dasharray: 2stroke-dasharray: 2.5stroke-dasharray: 2emstroke-dasharray: 15%
Nilai unitless adalah pilihan yang paling umum, seperti biasanya dengan nilai SVG. Mereka menjadi unit panjang yang relatif dengan sistem koordinat yang dibentuk oleh viewBox.
Lihat hartanah Pen stroke-dasharray oleh CSS-Tricks (@ css-tricks) di CodePen.
Menjadi Susah dengan stroke-dasharray
Pernahkah anda melihat demo hebat di mana bentuk SVG kelihatan menarik? Itulah muslihat yang mengambil stroke-dasharrayelemen dan menghidupkannya bersama dengan stroke-dashoffsetharta benda.
.path ( stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear forwards; ) @keyframes dash ( to ( stroke-dashoffset: 0; ) )Lihat Contoh Dasar Pen Lukisan Garisan SVG, Mundur dan Maju oleh Chris Coyier (@chriscoyier) di CodePen.
Kami merangkumi teknik ini dengan lebih terperinci dalam catatan ini. Nampaknya IE 11 ke bawah tidak suka menghidupkan sifat stroke dengan @keyframes, jadi berhati-hatilah di sana.
Berkaitan
strokestroke-dashoffsetstroke-linecapstroke-width
Maklumat lanjut
- SVG 1.1 Spesifikasi
- MDN mengenai pengisian dan pukulan
Sokongan Penyemak Imbas
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Ya | Ya | Ya | Ya | 9+ | 4.4+ | Ya |