stroke-dashoffsetNekretnina u CSS definira položaj duž SVG putu gdje je crtica se od strokeće početi. Što je broj veći, crtice će započinjati daljnjim putem.
.module ( stroke-dashoffset: 100; )Zapamtiti:
- Ovo će poništiti atribut prezentacije
- To neće nadjačati ugrađeni stil, npr
Vrijednosti
stroke-dashoffsetImovine može prihvatiti postotak ili numeričke vrijednosti.
stroke-dashoffset: 100stroke-dashoffset: 25%
Imajte na umu da jedinice (tj. emI px) nisu potrebne. Broj bez jedinica prikazuje se u jedinicama piksela. Postotak je u odnosu na postotak trenutnog okvira prikaza.
Pogledajte svojstvo Pen stroke-dashoffset tvrtke CSS-Tricks (@ css-tricks) na CodePen-u.
Dobivanje lukav s stroke-dashoffset
Jeste li ikada vidjeli one cool demonstracije u kojima se čini da se SVG oblik crta sam? To je trik koji animira stroke-dashoffsetelement u vezi sa stroke-dasharraysvojstvom.
.path ( stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear forwards; ) @keyframes dash ( to ( stroke-dashoffset: 0; ) )Pogledajte osnovni primjer olovke za crtanje SVG linija, unatrag i naprijed, autora Chris Coyier (@chriscoyier) na CodePenu.
Ovu tehniku pokrivamo puno detaljnije u ovom postu.
Povezano
strokestroke-dasharraystroke-linecapstroke-width
Više informacija
- SVG 1.1 Spec
- MDN na ispunama i potezima
Podrška preglednika
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Da | Da | Da | Da | 9+ | 4,4+ | Da |