stroke-dashoffsetHotel v CSS definira lokacijo vzdolž SVG poti, kjer kanček strokese bo začel. Večje kot je število, dlje po poti se bodo začele pomišljaji.
.module ( stroke-dashoffset: 100; )Ne pozabite:
- To bo preglasilo atribut predstavitve
- To ne bo preglasilo vrstnega sloga, npr
Vrednote
stroke-dashoffsetLastnost lahko sprejme določen odstotek ali številsko vrednost.
stroke-dashoffset: 100stroke-dashoffset: 25%
Upoštevajte, da enote (tj. emIn px) niso potrebne. Število brez enot je upodobljeno v enotah slikovnih pik. Odstotek je v primerjavi z odstotkom trenutnega prikaza.
Oglejte si lastnost Pen stroke-dashoffset s strani CSS-Tricks (@ css-tricks) na CodePen.
Pridobivanje zapletenega stroke-dashoffset
Ste že kdaj videli tiste kul predstavitve, kjer se zdi, da se oblika SVG nariše? To je trik, ki animira stroke-dashoffsetelement v povezavi z stroke-dasharraylastnostjo.
.path ( stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear forwards; ) @keyframes dash ( to ( stroke-dashoffset: 0; ) )Oglejte si osnovni primer pisala s črtami SVG, nazaj in naprej, ki ga je napisal Chris Coyier (@chriscoyier) na CodePen.
To tehniko v tej objavi obravnavamo veliko podrobneje.
Sorodno
strokestroke-dasharraystroke-linecapstroke-width
Več informacij
- SVG 1.1 Spec
- MDN na zapolnitvah in potezah
Podpora za brskalnik
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Da | Da | Da | Da | 9+ | 4,4+ | Da |