stroke-dasharray

The stroke-dasharray property in CSS is for creating dashes in the stroke of SVG shapes. The higher the number, the more space in between dashes in the stroke.

.module {
  stroke-dasharray: 5;
}

Remember:

  • This will override a presentation attribute <path stroke-dasharray="5" ... />
  • This will not override an inline style e.g. <path style="stroke-dasharray: 5;" ... />

Values

The stroke-dasharray property can accept any length, including unitless values:

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

Unitless values are likely the most common choice, as it is generally with SVG values. They become length units that are relative to the coordinate system set up by the viewBox.

See the Pen stroke-dasharray property by CSS-Tricks (@css-tricks) on CodePen.

Getting Tricky with stroke-dasharray

Have you ever seen those cool demos where an SVG shape appears to draw itself? That's a trick that takes the stroke-dasharray of an element and animates it in conjunction with the stroke-dashoffset property.

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

See the Pen Basic Example of SVG Line Drawing, Backward and Forward by Chris Coyier (@chriscoyier) on CodePen.

We cover this technique in much more detail in this post. It looks like IE 11 and down doesn't like animating the stroke properties with @keyframes, so be careful there.

Related

More Information

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Yes Yes Yes Yes 9+ 4.4+ Yes
This comment thread is closed. If you have important information to share, please contact us.
icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag