Lad os sige, at du har en linje i SVG:
<svg>
<line x1="0" y1="30" x2="500" y2="30" stroke-color="#f8a100" />
</svg>Du kan bruge stroke-dasharray ejendom i CSS for at lave bindestreger:
line {
stroke-dasharray: 5;
}Det 5 værdi er en relativ enhed baseret på størrelsen af SVG'erne viewBox. Vi kunne virkelig bruge enhver CSS-længde. Men hvad det gør, er at lave et mønster af streger, der er 5 enheder lange med 5 enheder mellemrum mellem dem.
Så langt så godt. Vi kan bruge to værdier, hvor den anden værdi individuelt indstiller mellemrummets længde:
Nu har vi bindestreger, der er 5 enheder og mellemrum, der er 10. Lad os prøve en tredje værdi:
Se, hvordan vi danner et mønster her? Det går:
- Dash: 5 enheder
- Mellemrum: 10 enheder
- Dash: 15 enheder
Man skulle tro, at det gentages derefter i nøjagtig samme kadence. Men nej! Hvis det gjorde det, ville vi have streger støde ind i hinanden:
- Dash: 5 enheder
- Mellemrum: 10 enheder
- Dash: 15 enheder
- Dash: 5 enheder
- Mellemrum: 10 enheder
- Dash: 15 enheder
- …og så videre.
I stedet stroke-dasharray bliver helt smart og duplikerer mønsteret, hvis der er et ulige antal værdier Så...
stroke-dasharray: 5 10 15;
/* is the same as */
stroke-dasharray: 5 10 15 5 10 15;Det er faktisk derfor, en enkelt værdi virker! Tidligere erklærede vi en single 5 værdi. Det er egentlig det samme som at sige stroke-dasharray: 5 5. Uden den anden værdi, stroke-dasharray dublerer implicit den første værdi for at få et gentageligt mønster. Ellers ville det bare være en fast linje af streger, der er 5 enheder lange, men ingen mellemrum mellem dem!
Mønsteret afhænger også af størrelsen på selve formen. Vores SVG line er 500 enheder. Lad os sætte større stroke-dasharray værdier og læg dem sammen:
stroke-dasharray: 10 20 30 40 50; /* 150 units */Hvis mønsteret kører fire gange (150 enheder ⨉ 4 iterationer), har vi at gøre med 600 samlede enheder. De yderligere 100 enheder klippes af for at forhindre, at mønsteret flyder over af sig selv.
Det er alt.
🎩 Hattip til Joshua dans forum kalder dette op!
