Säg att du har en rad i SVG:
<svg>
<line x1="0" y1="30" x2="500" y2="30" stroke-color="#f8a100" />
</svg>Du kan använda stroke-dasharray egenskap i CSS för att göra streck:
line {
stroke-dasharray: 5;
}Att 5 värde är en relativ enhet baserad på storleken på SVG:erna viewBox. Vi skulle kunna använda vilken CSS-längd som helst. Men vad den gör är att göra ett mönster av streck som är 5 enheter långa med 5 enheter mellanrum.
Än så länge är allt bra. Vi kan använda två värden där det andra värdet individuellt anger gaplängden:
Nu har vi streck som är 5 enheter och luckor som är 10. Låt oss prova ett tredje värde:
Ser du hur vi skapar ett mönster här? Det går:
- Dash: 5 enheter
- Gap: 10 enheter
- Dash: 15 enheter
Man skulle kunna tro att det upprepas efter det i exakt samma takt. Men nej! Om det gjorde det skulle vi få streck som stöter på varandra:
- Dash: 5 enheter
- Gap: 10 enheter
- Dash: 15 enheter
- Dash: 5 enheter
- Gap: 10 enheter
- Dash: 15 enheter
- …och så vidare.
Istället stroke-dasharray blir allt smart och duplicerar mönstret om det finns ett udda antal värden Så...
stroke-dasharray: 5 10 15;
/* is the same as */
stroke-dasharray: 5 10 15 5 10 15;Det är faktiskt därför ett enda värde fungerar! Tidigare deklarerade vi en singel 5 värde. Det är egentligen samma sak som att säga stroke-dasharray: 5 5. Utan det andra värdet, stroke-dasharray implicit duplicerar det första värdet för att få ett repeterbart mönster. Annars skulle det bara vara en hel linje med streck som är 5 enheter långa, men inga mellanrum mellan dem!
Mönstret beror också på storleken på själva formen. Vår SVG line är 500 enheter. Låt oss ställa större stroke-dasharray värden och addera dem:
stroke-dasharray: 10 20 30 40 50; /* 150 units */Om mönstret körs fyra gånger (150 enheter ⨉ 4 iterationer) har vi att göra med totalt 600 enheter. De ytterligare 100 enheterna tas bort för att förhindra att mönstret svämmar över av sig självt.
Det är allt.
🎩 Hatttips till Joshua Dans för ropar ut detta!
