stroke-dashoffsetProprietatea în CSS definește locația de-a lungul unui traseu SVG în cazul în care alura unei strokeva începe. Cu cât numărul este mai mare, cu atât vor începe liniuțele de-a lungul traseului.
.module ( stroke-dashoffset: 100; )Tine minte:
- Aceasta va înlocui un atribut de prezentare
- Acest lucru nu va suprascrie un stil inline, de exemplu
Valori
stroke-dashoffsetProprietatea poate accepta o valoare numerică sau procentuală.
stroke-dashoffset: 100stroke-dashoffset: 25%
Rețineți că unitățile (adică emși px) nu sunt necesare. Un număr fără unități este redat în unități de pixeli. Procentul este relativ la procentul din fereastra curentă.
Consultați proprietatea Pen stroke-dashoffset de către CSS-Tricks (@ css-tricks) pe CodePen.
Deveniți dificil cu stroke-dashoffset
Ai văzut vreodată acele demonstrații interesante în care o formă SVG pare să se deseneze singură? Acesta este un truc care animă stroke-dashoffsetun element împreună cu stroke-dasharrayproprietatea.
.path ( stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear forwards; ) @keyframes dash ( to ( stroke-dashoffset: 0; ) )Vedeți Exemplul de bază al stiloului SVG Line Drawing, înapoi și înainte de Chris Coyier (@chriscoyier) pe CodePen.
Acoperim această tehnică mult mai detaliat în această postare.
Legate de
strokestroke-dasharraystroke-linecapstroke-width
Mai multe informatii
- SVG 1.1 Spec
- MDN pe umpluturi și lovituri
Suport pentru browser
| Crom | Safari | Firefox | Operă | IE | Android | iOS |
|---|---|---|---|---|---|---|
| da | da | da | da | 9+ | 4.4+ | da |