Den stroke-dashoffsetejendom i CSS definerer placering langs en SVG sti, hvor strejf af en strokebegynder. Jo højere tallet er, jo længere langs stien begynder bindestregerne.
.module ( stroke-dashoffset: 100; )Husk:
- Dette vil tilsidesætte en præsentation attribut
- Dette tilsidesætter ikke en indbygget stil, f.eks
Værdier
Den stroke-dashoffsetegenskab kan acceptere en procentsats eller en numerisk værdi.
stroke-dashoffset: 100stroke-dashoffset: 25%
Bemærk, at enheder (dvs. emog px) ikke er påkrævet. Et tal uden enheder gengives i pixelenheder. Procentdelen er i forhold til procentdelen af den aktuelle visningsport.
Se egenskaben Pen stroke-dashoffset af CSS-Tricks (@ css-tricks) på CodePen.
Bliver vanskelig med stroke-dashoffset
Har du nogensinde set de seje demoer, hvor en SVG-form ser ud til at tegne sig selv? Det er et trick, der animerer stroke-dashoffsetet element i forbindelse med stroke-dasharrayejendommen.
.path ( stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear forwards; ) @keyframes dash ( to ( stroke-dashoffset: 0; ) )Se pennens grundlæggende eksempel på SVG-linjetegning, baglæns og fremad af Chris Coyier (@chriscoyier) på CodePen.
Vi dækker denne teknik meget mere detaljeret i dette indlæg.
Relaterede
strokestroke-dasharraystroke-linecapstroke-width
Mere information
- SVG 1.1 Spec
- MDN på fyld og slag
Browsersupport
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Ja | Ja | Ja | Ja | 9+ | 4.4+ | Ja |