A stroke-dashoffsetCSS-ben található tulajdonság meghatározza azt a helyet egy SVG-útvonal mentén, ahol a gondolatjel strokekezdõdik. Minél nagyobb a szám, annál tovább haladnak az útvonalon a kötőjelek.
.module ( stroke-dashoffset: 100; )Emlékezik:
- Ez lesz felülírja a bemutató attribútum
- Ez nem fogja felülírni az inline stílust, pl
Értékek
A stroke-dashoffsetszálláshely elfogadhat százalékos vagy numerikus értéket.
stroke-dashoffset: 100stroke-dashoffset: 25%
Ne feledje, hogy egységekre (azaz emés px) nincs szükség. Az egységek nélküli szám pixel egységekben kerül megjelenítésre. A százalékos arány az aktuális nézetablak százalékához viszonyítva.
Tekintse meg a CSS-Tricks (@ css-tricks) Pen stroke-dashoffset tulajdonságát a CodePen-en.
Trükkössé válni stroke-dashoffset
Láttál már olyan hűvös demókat, ahol egy SVG alakzat rajzolja meg magát? Ez egy trükk, amely stroke-dashoffsetegy elemet a stroke-dasharraytulajdonsággal együtt animál .
.path ( stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear forwards; ) @keyframes dash ( to ( stroke-dashoffset: 0; ) )Lásd Chris Coyier (@chriscoyier) SVG-vonalvezetésének toll-alappéldája, hátra és előre a CodePen-en.
Ebben a bejegyzésben sokkal részletesebben foglalkozunk ezzel a technikával.
Összefüggő
strokestroke-dasharraystroke-linecapstroke-width
Több információ
- SVG 1.1 Spec
- MDN a kitöltésekről és agyvérzésekről
Böngésző támogatás
| Króm | Szafari | Firefox | Opera | AZAZ | Android | iOS |
|---|---|---|---|---|---|---|
| Igen | Igen | Igen | Igen | 9+ | 4.4+ | Igen |