Insultas-dasharray - CSS-gudrybės

Anonim

stroke-dasharrayCSS turtas yra sukurti brūkšnių į SVG formų insulto. Kuo didesnis skaičius, tuo daugiau tarpo tarp brūkšnių yra brūkšnys.

.module ( stroke-dasharray: 5; )

Prisiminti:

  • Tai bus nepaisyti pristatymas atributą
  • Tai nebus nepaisyti inline stiliaus pvz

Vertybės

stroke-dasharrayTurtas gali priimti bet kokio ilgio, įskaitant unitless verčių:

  • stroke-dasharray: 2
  • stroke-dasharray: 2.5
  • stroke-dasharray: 2em
  • stroke-dasharray: 15%

Tikriausiai dažniausiai pasirenkamos vienetinės vertės, kaip tai paprastai būna su SVG reikšmėmis. Jie tampa ilgio vienetais, palyginti su koordinačių sistema, kurią sukūrė viewBox.

Peržiūrėkite „CSS-Tricks“ („@ css-tricks“) „Pen stroke-dasharray“ ypatybę „CodePen“.

Susigaudyti stroke-dasharray

Ar jūs kada nors matėte tas šaunias demonstracines versijas, kuriose atrodo, kad SVG forma piešia save? Tai gudrybė, kuri atima stroke-dasharrayiš elemento ir atgaivina jį kartu su stroke-dashoffsetnuosavybe.

.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ą. Panašu, kad IE 11 ir žemesnės versijos nemėgsta animuoti smūgio ypatybių naudojant „@keyframes“, todėl būkite atsargūs.

Susijęs

  • stroke
  • stroke-dashoffset
  • stroke-linecap
  • stroke-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