Insult-dashoffset - CSS-trikid

Anonim

stroke-dashoffsetVara CSS määratleb asukoha mööda SVG tee, kus kriips on strokealgab. Mida suurem on number, seda kaugemale rajale hakkavad kriipsud.

.module ( stroke-dashoffset: 100; )

Pidage meeles:

  • See on alistada esitlus atribuut
  • See ei alista sisemist stiili, nt

Väärtused

stroke-dashoffsetVara võib nõustuda protsendina või numbrilist väärtust.

  • stroke-dashoffset: 100
  • stroke-dashoffset: 25%

Pange tähele, et ühikuid (st emja px) ei nõuta. Ühikuteta number renderdatakse pikslites. Protsent on praeguse vaateava protsentuaalne.

Vaadake CodePenilt CSS-Tricks atribuuti Pen stroke-dashoffset (@ css-tricks).

Trikkiks saamine stroke-dashoffset

Kas olete kunagi näinud neid lahedaid demosid, kus SVG kuju näib end joonistavat? See on trikk, mis animeerib stroke-dashoffsetelemendi elemendi koos stroke-dasharrayomadusega.

.path ( stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear forwards; ) @keyframes dash ( to ( stroke-dashoffset: 0; ) )

Vaadake Chris Coyieri (@chriscoyier) CodePenil olevat pliiatsi põhinäidet SVG joonejoonistamisest, tagurpidi ja edasi.

Seda tehnikat käsitleme selles postituses palju üksikasjalikumalt.

Seotud

  • stroke
  • stroke-dasharray
  • stroke-linecap
  • stroke-width

Rohkem informatsiooni

  • SVG 1.1 spetsifikatsioon
  • MDN täidistel ja löökidel

Brauseri tugi

Chrome Safari Firefox Ooper IE Android iOS
Jah Jah Jah Jah 9+ 4.4+ Jah