CSS'deki stroke-dashoffsetözellik, tirenin strokebaşlayacağı SVG yolu boyunca konumu tanımlar . Sayı ne kadar yüksekse, yol boyunca çizgiler o kadar uzağa başlayacaktır.
.module ( stroke-dashoffset: 100; )Hatırlamak:
- Bu , bir sunum özelliğini geçersiz kılar
- Bu , satır içi stili geçersiz kılmaz, örneğin
Değerler
stroke-dashoffsetTesiste yüzde veya sayısal bir değer kabul edebilir.
stroke-dashoffset: 100stroke-dashoffset: 25%
Birimlerin (yani emve px) gerekli olmadığını unutmayın. Birimsiz bir sayı, piksel birimleri cinsinden oluşturulur. Yüzde, mevcut görüntü alanının yüzdesine bağlıdır.
CodePen'de CSS-Tricks (@ css-tricks) tarafından Kalem stroku-dashoffset özelliğine bakın.
Zor Başlarken stroke-dashoffset
Bir SVG şeklinin kendini çizdiği bu harika demoları hiç gördünüz mü? Bu stroke-dashoffset, stroke-dasharrayözellik ile bağlantılı olarak bir öğenin hareketini yapan bir hile .
.path ( stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear forwards; ) @keyframes dash ( to ( stroke-dashoffset: 0; ) )CodePen'de Chris Coyier (@chriscoyier) tarafından SVG Çizgi Çizimi, Geriye ve İleriye yönelik Kalem Temel Örneğine bakın.
Bu yazıda bu tekniği çok daha ayrıntılı olarak ele alıyoruz.
İlişkili
strokestroke-dasharraystroke-linecapstroke-width
Daha fazla bilgi
- SVG 1.1 Özellikleri
- Dolgular ve konturlarda MDN
Tarayıcı Desteği
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Evet | Evet | Evet | Evet | 9+ | 4.4+ | Evet |