Oletame, et teil on SVG-s rida:
<svg>
<line x1="0" y1="30" x2="500" y2="30" stroke-color="#f8a100" />
</svg>Võite kasutada stroke-dasharray atribuut CSS-is kriipsude tegemiseks:
line {
stroke-dasharray: 5;
}Et 5 väärtus on suhteline ühik, mis põhineb SVG-de suurusel viewBox. Me võiksime kasutada mis tahes CSS-i pikkust. Kuid see loob 5 ühiku pikkuse kriipsude mustri, mille vahel on 5 ühikut.
Siiamaani on kõik korras. Saame kasutada kahte väärtust, kus teine väärtus määrab individuaalselt vahe pikkuse:
Nüüd on meil kriipsud, mis on 5 ühikut ja lüngad, mis on 10. Proovime kolmandat väärtust:
Vaata, kuidas me siin mustrit moodustame? See läheb:
- Kriips: 5 ühikut
- Vahe: 10 ühikut
- Kriips: 15 ühikut
Võiks arvata, et see kordub pärast seda täpselt samas rütmis. Kuid mitte! Kui see juhtuks, põrkaksid meil kriipsud üksteise vastu:
- Kriips: 5 ühikut
- Vahe: 10 ühikut
- Kriips: 15 ühikut
- Kriips: 5 ühikut
- Vahe: 10 ühikut
- Kriips: 15 ühikut
- …ja nii edasi.
Selle asemel stroke-dasharray saab kõik nutikaks ja dubleerib mustri, kui väärtusi on paaritu arv.
stroke-dasharray: 5 10 15;
/* is the same as */
stroke-dasharray: 5 10 15 5 10 15;See on põhjus, miks üks väärtus töötab! Varem kuulutasime vallaliseks 5 väärtus. See on tegelikult sama, mis öelda stroke-dasharray: 5 5. Ilma teise väärtuseta stroke-dasharray dubleerib kaudselt esimest väärtust, et saada korratav muster. Vastasel juhul oleks see lihtsalt pidev kriipsude joon, mis on 5 ühikut pikk, kuid nende vahel pole tühikuid!
Muster oleneb ka kuju enda suurusest. Meie SVG line on 500 ühikut. Määrame suuremaks stroke-dasharray väärtused ja liita need kokku:
stroke-dasharray: 10 20 30 40 50; /* 150 units */Kui mustrit käitatakse neli korda (150 ühikut ⨉ 4 iteratsiooni), on kokku 600 ühikut. Need täiendavad 100 ühikut lõigatakse maha, et vältida mustri ületäitumist.
See on kõik.
🎩 Mütsi näpunäide Joshua tants eest seda välja kutsudes!
