Stroke-dasharray - CSS-tricks

Anonim

Den stroke-dasharrayegendom i CSS är för att skapa streck i slaget SVG former. Ju högre antal, desto mer utrymme mellan streck i strecket.

.module ( stroke-dasharray: 5; )

Kom ihåg:

  • Detta kommer att åsidosätta en presentation attribut
  • Detta kommer inte att åsidosätta en inline stil, t.ex.

Värden

Den stroke-dasharrayegenskapen kan acceptera någon längd, inklusive enhetslöst värden:

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

Enhetsfria värden är troligen det vanligaste valet, eftersom det i allmänhet är med SVG-värden. De blir längdenheter som är relativt det koordinatsystem som har ställts in av viewBox.

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

Bli knepig med stroke-dasharray

Har du någonsin sett de coola demorna där en SVG-form verkar dra sig? Det är ett trick som tar stroke-dasharrayett element och animerar det i samband med stroke-dashoffsetegenskapen.

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

Se Penns grundläggande exempel på SVG Line Drawing, Backward and Forward av Chris Coyier (@chriscoyier) på CodePen.

Vi täcker denna teknik mycket mer detaljerat i det här inlägget. Det ser ut som att IE 11 och ned inte gillar att animera strokeegenskaperna med @keyframes, så var försiktig där.

Relaterad

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

Mer information

  • SVG 1.1 Spec
  • MDN på fyllningar och stroke

Webbläsarstöd

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