Stel dat je een regel in SVG hebt:
<svg>
<line x1="0" y1="30" x2="500" y2="30" stroke-color="#f8a100" />
</svg>U kunt gebruik maken van de stroke-dasharray eigenschap in CSS om streepjes te maken:
line {
stroke-dasharray: 5;
}ZIJN 5 waarde is een relatieve eenheid gebaseerd op de grootte van de SVG's viewBox. We zouden eigenlijk elke CSS-lengte kunnen gebruiken. Maar wat het doet, is een patroon maken van streepjes van 5 eenheden lang met 5 eenheidsopeningen ertussen.
Tot nu toe, zo goed. We kunnen twee waarden gebruiken waarbij de tweede waarde afzonderlijk de lengte van de opening instelt:
Nu hebben we streepjes van 5 eenheden en gaten van 10. Laten we een derde waarde proberen:
Zie je hoe we hier een patroon vormen? Het gaat:
- Streepje: 5 eenheden
- Tussenruimte: 10 eenheden
- Streepje: 15 eenheden
Je zou denken dat het zich daarna herhaalt in exact dezelfde cadans. Maar nee! Als dat zo was, zouden we streepjes tegen elkaar hebben:
- Streepje: 5 eenheden
- Tussenruimte: 10 eenheden
- Streepje: 15 eenheden
- Streepje: 5 eenheden
- Tussenruimte: 10 eenheden
- Streepje: 15 eenheden
- …enzovoort.
In plaats stroke-dasharray wordt helemaal slim en dupliceert het patroon als er een oneven aantal waarden is. Dus...
stroke-dasharray: 5 10 15;
/* is the same as */
stroke-dasharray: 5 10 15 5 10 15;Dat is eigenlijk waarom een enkele waarde werkt! Eerder verklaarden we een single 5 waarde. Dat is eigenlijk hetzelfde als zeggen stroke-dasharray: 5 5. Zonder de tweede waarde, stroke-dasharray dupliceert impliciet de eerste waarde om een herhaalbaar patroon te krijgen. Anders zou het gewoon een ononderbroken lijn van streepjes zijn die 5 eenheden lang zijn, maar geen gaten ertussen!
Het patroon hangt ook af van de grootte van de vorm zelf. Onze SVG line bedraagt 500 eenheden. Laten we groter zetten stroke-dasharray waarden en tel ze op:
stroke-dasharray: 10 20 30 40 50; /* 150 units */Als het patroon vier keer wordt uitgevoerd (150 eenheden ⨉ 4 iteraties), hebben we te maken met 600 eenheden in totaal. Die extra 100 eenheden worden afgesneden om te voorkomen dat het patroon zelf overloopt.
Dat is alles.
🎩 Hoed tip om Joshua Dans For dit uitroepen!
