Să presupunem că aveți o linie în SVG:
<svg>
<line x1="0" y1="30" x2="500" y2="30" stroke-color="#f8a100" />
</svg>Aveți posibilitatea să utilizați stroke-dasharray proprietate în CSS pentru a face liniuțe:
line {
stroke-dasharray: 5;
}Că 5 valoarea este o unitate relativă bazată pe dimensiunea SVG-urilor viewBox. Am putea folosi orice lungime CSS, într-adevăr. Dar ceea ce face este să creeze un model de liniuțe lungi de 5 unități, cu 5 unități între ele.
Până acum, bine. Putem folosi două valori în care a doua valoare stabilește individual lungimea intervalului:
Acum avem liniuțe care sunt 5 unități și goluri care sunt 10. Să încercăm o a treia valoare:
Vedeți cum formăm un model aici? Merge:
- Dash: 5 unități
- Gap: 10 unități
- Dash: 15 unități
Ai crede că se repetă după aceea în exact aceeași cadență. Dar nu! Dacă ar fi, am avea liniuțe care se lovesc una de alta:
- Dash: 5 unități
- Gap: 10 unități
- Dash: 15 unități
- Dash: 5 unități
- Gap: 10 unități
- Dash: 15 unități
- …si asa mai departe.
În schimb, stroke-dasharray devine inteligent și dublează modelul dacă există un număr impar de valori Deci...
stroke-dasharray: 5 10 15;
/* is the same as */
stroke-dasharray: 5 10 15 5 10 15;De aceea funcționează o singură valoare! Mai devreme, am declarat un singur 5 valoare. Este într-adevăr același lucru cu a spune stroke-dasharray: 5 5. Fără a doua valoare, stroke-dasharray duplică implicit prima valoare pentru a obține un model repetabil. În caz contrar, ar fi doar o linie solidă de linii lungi de 5 unități, dar fără goluri între ele!
Modelul depinde și de dimensiunea formei în sine. SVG-ul nostru line este de 500 de unități. Să punem mai mare stroke-dasharray valorile și adună-le:
stroke-dasharray: 10 20 30 40 50; /* 150 units */Dacă modelul rulează de patru ori (150 de unități ⨉ 4 iterații), avem de-a face cu 600 de unități totale. Cele 100 de unități suplimentare sunt tăiate pentru a preveni revărsarea modelului.
Asta e tot.
🎩 Sfat pentru pălărie Joshua Dance pentru strigând asta!
