Insulta-dashoffset - CSS-triki

Anonim

stroke-dashoffsetĪpašums CSS definē vietu gar SVG ceļu, kur tonētu strokesāksies. Jo lielāks skaitlis, jo tālāk pa ceļu sāksies domuzīmes.

.module ( stroke-dashoffset: 100; )

Atcerieties:

  • Tas būs ignorēt prezentācijas atribūtu
  • Tas nebūs ignorēt inline stila piemēram

Vērtības

stroke-dashoffsetĪpašums var pieņemt procentuālo daļu vai skaitlisku vērtību.

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

Ņemiet vērā, ka vienības (ti, emun px) nav nepieciešamas. Skaitlis bez vienībām tiek atveidots pikseļu vienībās. Procenti ir salīdzinājumā ar pašreizējā skata punkta procentiem.

Skatiet CSS-Tricks (@ css-tricks) rekvizītu Pen stroke-dashoffset vietnē CodePen.

Kļūst triks ar stroke-dashoffset

Vai esat kādreiz redzējuši tos foršos demonstrācijas, kur, šķiet, ka SVG forma velk sevi? Tas ir triks, kas atdzīvina stroke-dashoffsetelementu kopā ar stroke-dasharrayīpašumu.

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

Skatiet Krista Koijera (@chriscoyier) SVG līnijas zīmēšanas, atpakaļ un uz priekšu, pildspalvveida pilnšļirci vietnē CodePen.

Šajā amatā mēs daudz detalizētāk aplūkojam šo tehniku.

Saistīts

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

Vairāk informācijas

  • SVG 1.1 Spec
  • MDN uz pildījumiem un insultiem

Pārlūka atbalsts

Chrome Safari Firefox Opera IE Android iOS
Jā Jā Jā Jā 9+ 4.4+ Jā