Den stroke-dashoffsetegendom i CSS definierar platsen längs en SVG väg där stänk av en strokebörjar. Ju högre siffra, desto längre längs vägen streck börjar.
.module ( stroke-dashoffset: 100; )Kom ihåg:
- Detta kommer att åsidosätta en presentation attribut
- Detta kommer inte att åsidosätta en inline stil, t.ex.
Värden
Den stroke-dashoffsetegenskapen kan acceptera en procentsats eller ett numeriskt värde.
stroke-dashoffset: 100stroke-dashoffset: 25%
Observera att enheter (dvs. emoch px) inte krävs. Ett antal utan enheter återges i pixelenheter. Procentandelen är relativt procenten av den aktuella visningsporten.
Se egenskapen Pen stroke-dashoffset av CSS-Tricks (@ css-tricks) på CodePen.
Bli knepig med stroke-dashoffset
Har du någonsin sett de coola demorna där en SVG-form verkar dra sig? Det är ett knep som animerar stroke-dashoffsetett element i samband med stroke-dasharrayegenskapen.
.path ( stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear forwards; ) @keyframes dash ( to ( stroke-dashoffset: 0; ) )Se Penns grundläggande exempel på SVG Line Drawing, Backward and Forward av Chris Coyier (@chriscoyier) på CodePen.
Vi täcker denna teknik mycket mer detaljerat i det här inlägget.
Relaterad
strokestroke-dasharraystroke-linecapstroke-width
Mer information
- SVG 1.1 Spec
- MDN på fyllningar och stroke
Webbläsarstöd
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Ja | Ja | Ja | Ja | 9+ | 4.4+ | Ja |