The stroke-dashoffsetharta di CSS mentakrifkan lokasi di sepanjang jalan SVG mana yang melontarkan yang strokeakan bermula. Semakin tinggi bilangannya, semakin jauh di sepanjang jalan, tanda sempang akan bermula.
.module ( stroke-dashoffset: 100; )Ingat:
- Ini akan mengatasi atribut persembahan
- Ini tidak akan mengatasi gaya sebaris misalnya
Nilai
Properti stroke-dashoffsetini dapat menerima peratusan atau nilai angka.
stroke-dashoffset: 100stroke-dashoffset: 25%
Perhatikan bahawa unit (iaitu emdan px) tidak diperlukan. Nombor tanpa unit diberikan dalam unit piksel. Peratusan adalah relatif dengan peratus pangkalan pandangan semasa.
Lihat hartanah Pen stroke-dashoffset oleh CSS-Tricks (@ css-tricks) di CodePen.
Menjadi Susah dengan stroke-dashoffset
Pernahkah anda melihat demo hebat di mana bentuk SVG kelihatan menarik? Itu muslihat yang menghidupkan stroke-dashoffsetelemen bersama dengan stroke-dasharrayharta 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.
Berkaitan
strokestroke-dasharraystroke-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 |