CSS'deki stroke-dasharrayözellik, SVG şekillerinin konturunda çizgiler oluşturmak içindir. Sayı ne kadar yüksek olursa, konturdaki çizgiler arasında o kadar fazla boşluk olur.
.module ( stroke-dasharray: 5; )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-dasharrayMülkiyet birimsiz değerler dahil olmak üzere herhangi uzunluğunu kabul edebilir:
stroke-dasharray: 2stroke-dasharray: 2.5stroke-dasharray: 2emstroke-dasharray: 15%
Birimsiz değerler, genellikle SVG değerlerinde olduğu gibi muhtemelen en yaygın seçenektir. Tarafından kurulan koordinat sistemine göre uzunluk birimleri haline gelirler viewBox.
CodePen'de CSS-Tricks (@ css-tricks) tarafından hazırlanan Kalem stroku-dasharray özelliğine bakın.
Zor Başlarken stroke-dasharray
Bir SVG şeklinin kendini çizdiği bu harika demoları hiç gördünüz mü? Bu stroke-dasharray, bir elementi alan ve onu stroke-dashoffsetözellik ile birlikte hareketlendiren 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. Görünüşe göre IE 11 ve down, vuruş özelliklerini @ keyframes ile canlandırmayı sevmiyor, bu yüzden dikkatli olun.
İlişkili
strokestroke-dashoffsetstroke-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 |