The stroke-dashoffsetproperti di CSS mendefinisikan lokasi di sepanjang jalur SVG mana dasbor dari strokeakan dimulai. Semakin tinggi angkanya, semakin jauh garis setrip akan dimulai.
.module ( stroke-dashoffset: 100; )Ingat:
- Ini akan menggantikan atribut presentasi
- Ini tidak akan menimpa gaya sebaris misalnya
Nilai
The stroke-dashoffsetproperti dapat menerima persentase atau nilai numerik.
stroke-dashoffset: 100stroke-dashoffset: 25%
Perhatikan bahwa unit (yaitu emdan px) tidak diperlukan. Angka tanpa satuan dirender dalam satuan piksel. Persentase relatif terhadap persentase viewport saat ini.
Lihat properti Pen stroke-dashoffset oleh CSS-Tricks (@ css-trick) di CodePen.
Menjadi Rumit dengan stroke-dashoffset
Pernahkah Anda melihat demo keren di mana bentuk SVG tampak menggambar dirinya sendiri? Itu adalah trik yang menganimasikan stroke-dashoffsetelemen dalam hubungannya dengan stroke-dasharrayproperti.
.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.
Terkait
strokestroke-dasharraystroke-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 |