Stroke-dasharray - CSS-triks

Anonim

Den stroke-dasharrayeiendom i CSS er for å lage streker i slaget SVG former. Jo høyere tall, jo mer mellomrom mellom streker i slag.

.module ( stroke-dasharray: 5; )

Huske:

  • Dette vil overstyre en presentasjon attributt
  • Dette overstyrer ikke en innebygd stil, f.eks

Verdier

Den stroke-dasharrayegenskapen kan akseptere enhver lengde, inkludert dimensjonsløs verdier:

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

Enhetsløse verdier er sannsynligvis det vanligste valget, som det vanligvis er med SVG-verdier. De blir lengdenheter som er relative til koordinatsystemet satt opp av viewBox.

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

Bli vanskelig med stroke-dasharray

Har du noen gang sett de kule demoer der en SVG-form ser ut til å tegne seg selv? Det er et triks som tar stroke-dasharrayelementet og animerer det i forbindelse med stroke-dashoffseteiendommen.

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

Se pennens grunnleggende eksempel på SVG-linjetegning, bakover og fremover av Chris Coyier (@chriscoyier) på CodePen.

Vi dekker denne teknikken mye mer detaljert i dette innlegget. Det ser ut til at IE 11 og ned ikke liker å animere slagegenskapene med @keyframes, så vær forsiktig der.

I slekt

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

Mer informasjon

  • SVG 1.1 spesifikasjon
  • MDN på fyll og slag

Nettleserstøtte

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