Slagtilfælde-dasharray - CSS-tricks

Anonim

Den stroke-dasharrayejendom i CSS er for at skabe streger i slaget SVG former. Jo højere tallet er, desto mere plads er der mellem streger i stregen.

.module ( stroke-dasharray: 5; )

Husk:

  • Dette vil tilsidesætte en præsentation attribut
  • Dette tilsidesætter ikke en indbygget stil, f.eks

Værdier

Den stroke-dasharrayegenskab kan acceptere enhver længde, herunder dimensionsløs værdier:

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

Enhedsløse værdier er sandsynligvis det mest almindelige valg, da det generelt er med SVG-værdier. De bliver længdeenheder, der er relative til det koordinatsystem, der er oprettet af viewBox.

Se egenskaben Pen stroke-dasharray af CSS-Tricks (@ css-tricks) på CodePen.

Bliver vanskelig med stroke-dasharray

Har du nogensinde set de seje demoer, hvor en SVG-form ser ud til at tegne sig selv? Det er et trick, der tager stroke-dasharrayelementet og animerer det i forbindelse med stroke-dashoffsetejendommen.

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

Se pennens grundlæggende eksempel på SVG-linjetegning, baglæns og fremad af Chris Coyier (@chriscoyier) på CodePen.

Vi dækker denne teknik meget mere detaljeret i dette indlæg. Det ser ud til, at IE 11 og ned ikke kan lide at animere stregegenskaberne med @keyframes, så vær forsigtig der.

Relaterede

  • stroke
  • stroke-dashoffset
  • stroke-linecap
  • stroke-width

Mere information

  • SVG 1.1 Spec
  • MDN på fyld og slag

Browsersupport

Chrome Safari Firefox Opera IE Android iOS
Ja Ja Ja Ja 9+ 4.4+ Ja