SVG'de bir satırınız olduğunu söyleyin:
<svg>
<line x1="0" y1="30" x2="500" y2="30" stroke-color="#f8a100" />
</svg>Sen kullanabilirsiniz stroke-dasharray tire yapmak için CSS'deki özellik:
line {
stroke-dasharray: 5;
}O 5 değer, SVG'lerin boyutuna dayalı göreli bir birimdir. viewBox. Gerçekten herhangi bir CSS uzunluğunu kullanabiliriz. Ancak yaptığı şey, aralarında 5 birim boşluk bulunan 5 birim uzunluğunda bir tire deseni oluşturmaktır.
Çok uzak çok iyi. İkinci değerin boşluk uzunluğunu ayrı ayrı belirlediği iki değer kullanabiliriz:
Şimdi elimizde 5 birimlik tireler ve 10'luk boşluklar var. Üçüncü bir değer deneyelim:
Burada nasıl bir kalıp oluşturduğumuzu görüyor musunuz? Gider:
- Çizgi: 5 adet
- Boşluk: 10 adet
- Çizgi: 15 adet
Bundan sonra aynı kadansta tekrar ettiğini düşünürdünüz. Ama hayır! Olsaydı, birbirine çarpan kısa çizgilerimiz olurdu:
- Çizgi: 5 adet
- Boşluk: 10 adet
- Çizgi: 15 adet
- Çizgi: 5 adet
- Boşluk: 10 adet
- Çizgi: 15 adet
- …ve bunun gibi.
Bunun yerine, stroke-dasharray tek sayıda değer varsa, tamamen akıllı hale gelir ve deseni çoğaltır Yani…
stroke-dasharray: 5 10 15;
/* is the same as */
stroke-dasharray: 5 10 15 5 10 15;Aslında tek bir değerin işe yaramasının nedeni budur! Daha önce tek tek ilan etmiştik. 5 değer. Bu gerçekten söylemekle aynı stroke-dasharray: 5 5. İkinci değer olmadan, stroke-dasharray tekrarlanabilir bir model elde etmek için ilk değeri örtük olarak çoğaltır. Aksi takdirde, sadece 5 birim uzunluğunda, ancak aralarında boşluk olmayan düz bir çizgi olurdu!
Desen ayrıca şeklin boyutuna da bağlıdır. SVG'miz line 500 adettir. Daha büyük ayarlayalım stroke-dasharray değerler ve bunları ekleyin:
stroke-dasharray: 10 20 30 40 50; /* 150 units */Model dört kez çalışırsa (150 birim ⨉ 4 yineleme), toplam 600 birim ile uğraşıyoruz demektir. Desenin kendi kendine taşmasını önlemek için bu ek 100 birim kesilir.
Bu kadar.
🎩 Şapka ucu Joshua Dansı için bunu haykırmak!
