De stroke-dashoffseteigenschap in CSS definieert de locatie langs een SVG-pad waar het streepje van een strokezal beginnen. Hoe hoger het nummer, hoe verder de streepjes op het pad beginnen.
.module ( stroke-dashoffset: 100; )Onthouden:
- Dit heeft voorrang op een presentatiekenmerk
- Dit heeft geen voorrang op een inline stijl, bijv
Waarden
De stroke-dashoffseteigenschap kan een percentage of een numerieke waarde accepteren.
stroke-dashoffset: 100stroke-dashoffset: 25%
Merk op dat eenheden (dwz emen px) niet vereist zijn. Een getal zonder eenheden wordt weergegeven in pixeleenheden. Percentage is relatief ten opzichte van het percentage van de huidige viewport.
Zie de eigenschap Pen stroke-dashoffset door CSS-Tricks (@ css-tricks) op CodePen.
Lastig worden met stroke-dashoffset
Heb je ooit die coole demo's gezien waarin een SVG-vorm zichzelf lijkt te tekenen? Dat is een truc die de stroke-dashoffsetvan een element in combinatie met de stroke-dasharrayeigenschap 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.
Verwant
strokestroke-dasharraystroke-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 |