stroke-dashoffsetCSS nuosavybė apibrėžia vietą palei SVG keliu kur brūkšnelis strokebus pradėti. Kuo didesnis skaičius, tuo toliau kelyje prasidės brūkšniai.
.module ( stroke-dashoffset: 100; )Prisiminti:
- Tai bus nepaisyti pristatymas atributą
- Tai nebus nepaisyti inline stiliaus pvz
Vertybės
stroke-dashoffsetTurtas gali priimti procentą arba skaitinę reikšmę.
stroke-dashoffset: 100stroke-dashoffset: 25%
Atkreipkite dėmesį, kad vienetų (ty emir px) nereikia. Skaičius be vienetų atvaizduojamas pikselių vienetais. Procentas yra santykinis su dabartinės peržiūros srities procentais.
Peržiūrėkite „CSS-Tricks“ („@ css-tricks“) „Pen stroke-dashoffset“ ypatybę „CodePen“.
Susigaudyti stroke-dashoffset
Ar jūs kada nors matėte tas šaunias demonstracines versijas, kuriose atrodo, kad SVG forma piešia save? Tai gudrybė, kuri stroke-dashoffsetkartu su stroke-dasharraynuosavybe atgaivina elemento elementą .
.path ( stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear forwards; ) @keyframes dash ( to ( stroke-dashoffset: 0; ) )Žr. „ChrisP Coyier“ (@chriscoyier) „CodePen“ pagrindinį pieštuko „Svarbus SVG linijų brėžimas, atgal ir į priekį“ pavyzdį.
Šioje technikoje daug išsamiau aprašome šią techniką.
Susijęs
strokestroke-dasharraystroke-linecapstroke-width
Daugiau informacijos
- SVG 1.1 Spec
- MDN apie užpildymus ir smūgius
Naršyklės palaikymas
| „Chrome“ | „Safari“ | „Firefox“ | Opera | T.Y | „Android“ | „iOS“ |
|---|---|---|---|---|---|---|
| Taip | Taip | Taip | Taip | 9+ | 4.4+ | Taip |