Si at du har en linje i SVG:
<svg>
<line x1="0" y1="30" x2="500" y2="30" stroke-color="#f8a100" />
</svg>Du kan også bruke det stroke-dasharray eiendom i CSS for å lage bindestreker:
line {
stroke-dasharray: 5;
}Det 5 verdi er en relativ enhet basert på størrelsen på SVG-ene viewBox. Vi kan bruke hvilken som helst CSS-lengde, egentlig. Men det den gjør er å lage et mønster av streker som er 5 enheter lange med 5 enheter mellomrom.
Så langt så bra. Vi kan bruke to verdier der den andre verdien individuelt setter gaplengden:
Nå har vi bindestreker som er 5 enheter og mellomrom som er 10. La oss prøve en tredje verdi:
Ser du hvordan vi danner et mønster her? Det går:
- Dash: 5 enheter
- Avstand: 10 enheter
- Dash: 15 enheter
Du skulle tro det gjentas etter det i nøyaktig samme takt. Men nei! Hvis det gjorde det, ville vi ha streker som støter på hverandre:
- Dash: 5 enheter
- Avstand: 10 enheter
- Dash: 15 enheter
- Dash: 5 enheter
- Avstand: 10 enheter
- Dash: 15 enheter
- …og så videre.
I stedet stroke-dasharray blir alt smart og dupliserer mønsteret hvis det er et oddetall verdier Så...
stroke-dasharray: 5 10 15;
/* is the same as */
stroke-dasharray: 5 10 15 5 10 15;Det er faktisk derfor en enkelt verdi fungerer! Tidligere erklærte vi en singel 5 verdi. Det er egentlig det samme som å si stroke-dasharray: 5 5. Uten den andre verdien, stroke-dasharray implisitt dupliserer den første verdien for å få et repeterbart mønster. Ellers ville det bare være en solid linje med streker som er 5 enheter lange, men ingen mellomrom mellom dem!
Mønsteret avhenger også av størrelsen på selve formen. Vår SVG line er 500 enheter. La oss sette større stroke-dasharray verdier og legg dem sammen:
stroke-dasharray: 10 20 30 40 50; /* 150 units */Hvis mønsteret kjøres fire ganger (150 enheter ⨉ 4 iterasjoner), har vi å gjøre med totalt 600 enheter. De ytterligere 100 enhetene blir skåret av for å forhindre at mønsteret renner over seg selv.
Det er alt.
🎩 Hattip til Joshua dans forum ringer opp dette!
