De stroke-dasharrayeigenschap in CSS is voor het maken van streepjes in de streek van SVG-vormen. Hoe hoger het getal, hoe meer ruimte tussen streepjes in de streek.
.module ( stroke-dasharray: 5; )Onthouden:
- Dit heeft voorrang op een presentatiekenmerk
- Dit heeft geen voorrang op een inline stijl, bijv
Waarden
De stroke-dasharrayeigenschap kan elke lengte accepteren, inclusief waarden zonder eenheid:
stroke-dasharray: 2stroke-dasharray: 2.5stroke-dasharray: 2emstroke-dasharray: 15%
Eenheidsloze waarden zijn waarschijnlijk de meest gebruikelijke keuze, zoals meestal het geval is bij SVG-waarden. Ze worden lengte-eenheden die betrekking hebben op het coördinatensysteem dat is ingesteld door de viewBox.
Zie de eigenschap Pen stroke-dasharray door CSS-Tricks (@ css-tricks) op CodePen.
Lastig worden met stroke-dasharray
Heb je ooit die coole demo's gezien waarin een SVG-vorm zichzelf lijkt te tekenen? Dat is een truc die de stroke-dasharrayvan een element neemt en het samen met de stroke-dashoffseteigenschap animeert .
.path ( stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear forwards; ) @keyframes dash ( to ( stroke-dashoffset: 0; ) )Zie het Pen Basisvoorbeeld van SVG-lijntekening, achteruit en vooruit door Chris Coyier (@chriscoyier) op CodePen.
We behandelen deze techniek in dit bericht veel meer in detail. Het lijkt erop dat IE 11 en lager er niet van houdt om de streekeigenschappen te animeren met @keyframes, dus wees daar voorzichtig.
Verwant
strokestroke-dashoffsetstroke-linecapstroke-width
Meer informatie
- SVG 1.1-specificatie
- MDN op vullingen en slagen
Browser-ondersteuning
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| Ja | Ja | Ja | Ja | 9+ | 4.4+ | Ja |