stroke-dashoffsetOmaisuus CSS määrittelee lomakohde SVG polku, jossa viiva on strokealkaa. Mitä suurempi luku, sitä pidemmällä polulla viivat alkavat.
.module ( stroke-dashoffset: 100; )Muistaa:
- Tämä tulee ohittaa esityksen määrite
- Tämä ei korvaa linjatyyliä esim
Arvot
stroke-dashoffsetOmaisuus voi hyväksyä prosenttiosuus tai numeerinen arvo.
stroke-dashoffset: 100stroke-dashoffset: 25%
Huomaa, että yksiköitä (eli emja px) ei tarvita. Numero ilman yksikköä renderöidään pikseliyksiköinä. Prosenttiosuus on suhteessa nykyisen näkymän prosenttiosuuteen.
Katso CSS-Tricks (@ css-tricks) -kynän lyönti-dashoffset-ominaisuus CodePenistä.
Hankkiminen hankalaksi stroke-dashoffset
Oletko koskaan nähnyt niitä hienoja demoja, joissa SVG-muoto näyttää vetävän itsensä? Se on temppu, joka animoi stroke-dashoffsetelementin yhdessä stroke-dasharrayominaisuuden kanssa.
.path ( stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear forwards; ) @keyframes dash ( to ( stroke-dashoffset: 0; ) )Katso kynän perusesimerkki Chris Coyierin (@chriscoyier) SVG-viivapiirroksesta, taaksepäin ja eteenpäin CodePenissä.
Käsittelemme tätä tekniikkaa paljon yksityiskohtaisemmin tässä viestissä.
Liittyvät
strokestroke-dasharraystroke-linecapstroke-width
Lisää tietoa
- SVG 1.1 Erittely
- MDN täytteissä ja aivohalvauksissa
Selaimen tuki
| Kromi | Safari | Firefox | Ooppera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Joo | Joo | Joo | Joo | 9+ | 4.4+ | Joo |