{"id":236645,"date":"2016-01-18T14:24:06","date_gmt":"2016-01-18T21:24:06","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=236645"},"modified":"2022-07-13T16:15:35","modified_gmt":"2022-07-13T23:15:35","slug":"stroke-dasharray","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke-dasharray\/","title":{"rendered":"stroke-dasharray"},"content":{"rendered":"\n

The stroke-dasharray<\/code> property in CSS sets the length of dashes in the stroke of SVG shapes. More specifically, it sets the length of a pattern of alternating dashes and the gaps between them<\/em>.<\/p>\n\n\n\n\n\n\n\n

path {\n  stroke-dasharray: 5; \/* dashes and gaps are both 5 units long *\/\n}<\/code><\/pre>\n\n\n\n
It’s a ll a little confusing because stroke-dasharray<\/code> is a SVG presentational attribute (e.g. <path stroke-dasharray=\"5\" ... \/><\/code>) that can also be used as a CSS property in your stylesheet, like this:<\/p>\n\n\n\n
As such, you’ll want to remember:<\/p>\n\n\n\n
  • This will<\/strong> override the SVG presentation attribute, e.g. <path stroke-dasharray=\"5\" ... \/><\/code><\/li>
  • This will not<\/strong> override an inline style, e.g. <path style=\"stroke-dasharray: 5;\" ... \/><\/code><\/li><\/ul>\n\n\n
    Where to use it<\/h3>\n\n\n
    First off, this property is specifically designed to work with SVG elements. Which ones? Basically any SVG shape or text element:<\/p>\n\n\n\n
    • <altGlyph><\/code><\/li>
    • <circle><\/code><\/li>
    • <ellipse><\/code><\/li>
    • <path><\/code><\/li>
    • <line><\/code><\/li>
    • <polygon><\/code><\/li>
    • <polyline><\/code><\/li>
    • <rect><\/code><\/li>
    • <text><\/code><\/li>
    • <textPath><\/code><\/li>
    • <tref><\/code><\/li>
    • <tspan><\/code><\/li><\/ul>\n\n\n
      Syntax<\/h3>\n\n\n
      stroke-dasharray: none | <dasharray> | inherit;<\/code><\/pre>\n\n\n\n
      • Initial value:<\/strong> none<\/code><\/li>
      • Applies to:<\/strong> SVG shapes and text content elements<\/li>
      • Inherited:<\/strong> yes<\/li>
      • Animatable:<\/strong> yes (non-additive)<\/li><\/ul>\n\n\n
        Values<\/h3>\n\n\n
        \/* Keyword values *\/\nstroke-dasharray: none;\nstroke-dasharray: inherit;\n\n\/* Length values *\/\nstroke-dasharray: 2\nstroke-dasharray: 2.5\nstroke-dasharray: 2em\nstroke-dasharray: 15%\n\n\/* Two-value syntax *\/\nstroke-dasharray: 2 4\nstroke-dasharray: 2 4% 5 4%\nstroke-dasharray: 2em 4 6 8<\/code><\/pre>\n\n\n\n
        Values can be separated either by spaces or commas \u2014 your choice!<\/p>\n\n\n\n
        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<\/code>.<\/p>\n\n\n
        Pattern behavior<\/h3>\n\n\n
        The mind-bending thing about stroke-dasharray<\/code> is that it’s merely a set of length values, but its setting both the length of the dashes and gaps between them.<\/p>\n\n\n\n
        If we set one value<\/strong>, both the dash length and gap length take that value and repeat the pattern.<\/p>\n\n\n\n