stroke-dasharray

The value is a list of comma and/or white space separated <number>, <length>, and / or <percentage> values that specify the lengths of alternating dashes and gaps, or the keyword none. If an odd number of values are given, the entire value will be repeated in order to set an even number of values.

none

The stroke will be drawn without any dashes. The default value.

<number>

A number of SVG units, the size of which are defined by the current unit space. Negative values are invalid.

<length>

Pixel units are handled the same as SVG units (see <number>, above) and font-based lengths such as em are calculated with respect to the element's SVG value for the text size; the effects of other length units may depend on the browser. Negative values are invalid.

<percentage>

Percentages refer to the normalized diagonal of the current SVG viewport, which is calculated as $\frac{\sqrt{{\mathrm{<width>}}^2+{\mathrm{<height>}}^2}}{\sqrt{2}}$. Negative values are invalid.

stroke-dasharray = 
  none                                  |
  [ <length-percentage> | <number> ]+#  

<length-percentage> = 
  <length>      |
  <percentage>  

This example demonstrates basic usage of the stroke-dasharray property using space-separated <number> values.

HTML

First, we set up a basic SVG rectangle shape. To this rectangle, a red stroke with a width of 2 is applied.

<svg viewBox="0 0 100 50" width="500" height="250">
  <rect
    x="10"
    y="10"
    width="80"
    height="30"
    fill="none"
    stroke="red"
    stroke-width="2" />
</svg>

CSS

We define a dash pattern for the stroke: ten units of dash, followed by five units of space. This means the gaps between dashes will be half the length as the dashes themselves.

rect {
  stroke-dasharray: 10 5;
}

Results

Where the stroke turns a corner, the pattern is carried along, as it were. At the top left corner, where the start and end of the stroke meet, the ten-unit-long starting dash appears to join with the part of the dash pattern seen at the end of the path, creating what looks like a longer-than-ten-units line bending around the corner.

This example includes an odd-number of comma-separated <number> values to demonstrates how the value is repeated if an odd number of values is given in order to set an even number of values.

HTML

In this case, we define two rectangles.

<svg viewBox="0 0 100 100" width="500" height="500">
  <rect
    x="10"
    y="10"
    width="80"
    height="30"
    fill="none"
    stroke="red"
    stroke-width="2" />
  <rect
    x="10"
    y="60"
    width="80"
    height="30"
    fill="none"
    stroke="red"
    stroke-width="2" />
</svg>

CSS

To the first rectangle, we define a dasharray of 5, 5, 1, which calls for five units of dash, five of gap, and one unit of dash. However, because this is an odd number of numbers, the entire set of numbers is repeated, thus creating a value identical to that applied to the second rectangle.

rect:nth-of-type(1) {
  stroke-dasharray: 5, 5, 1;
}
rect:nth-of-type(2) {
  stroke-dasharray: 5, 5, 1, 5, 5, 1;
}

Result

The reason an even count of numbers is required is so that every dash array begins with a dash and ends with a gap. Thus, the pattern defined is a five-unit dash, a five-unit gap, a one-unit dash, a five-unit gap, a five-unit dash, and a one-unit gap. In the resulting stroke, every instance of a one-unit gap between two five-unit dashes indicates a place where the dash array starts over.

This example demonstrates the use of <percentage> and <length> values within the stroke-dasharray property value.

HTML

As in the previous example, we define two rectangles.

<svg viewBox="0 0 100 100" width="500" height="500">
  <rect
    x="10"
    y="10"
    width="80"
    height="30"
    fill="none"
    stroke="red"
    stroke-width="2" />
  <rect
    x="10"
    y="60"
    width="80"
    height="30"
    fill="none"
    stroke="red"
    stroke-width="2" />
</svg>

CSS

This time, rather than collections of bare numbers, we use pixel units and percentages.

rect:nth-of-type(1) {
  stroke-dasharray: 5px, 5px, 1px;
}
rect:nth-of-type(2) {
  stroke-dasharray: 5%, 5%, 1%;
}

Results

The results are essentially indistinguishable from the results in the previous example.

• stroke-dashoffset
• stroke-linecap
• stroke-linejoin
• stroke-miterlimit
• stroke-opacity
• stroke-width
• stroke
• SVG stroke-dasharray attribute