stroke-dasharray
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
The stroke-dasharray
CSS property defines a pattern of dashes and gaps used in the painting of the SVG shape's stroke. If present, it overrides the element's stroke-dasharray
attribute.
This property applies to any SVG shape or text-content element (see stroke-dasharray
for a full list), but as an inherited property, it may be applied to elements such as <g>
and still have the intended effect on descendant elements' strokes.
Syntax
/* Keywords */
stroke-dasharray: none;
/* Numeric, length, and percentage values */
stroke-dasharray: 2px, 5px;
stroke-dasharray: 20%, 50%;
stroke-dasharray: 2, 5;
/* The following two rules are equivalent */
stroke-dasharray: 2, 5, 3;
stroke-dasharray: 2, 5, 3, 2, 5, 3;
/* Global values */
stroke-dasharray: inherit;
stroke-dasharray: initial;
stroke-dasharray: revert;
stroke-dasharray: revert-layer;
stroke-dasharray: unset;
Values
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 asem
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 . Negative values are invalid.
Formal definition
Initial value | none |
---|---|
Applies to | <circle> , <ellipse> , <line> , <path> , <polygon> , <polyline> , and <rect> elements in an svg |
Inherited | yes |
Percentages | refer to the normalized diagonal measure of the current SVG viewport’s applied viewbox , or of the viewport itself if no `viewBox` is specified |
Computed value | A comma separated list of absolute lengths or percentages, numbers converted to absolute lengths first, or keyword specified |
Animation type | a repeatable list |
Formal syntax
Examples
Basic dash array
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.
Dash array repetition
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.
Percentage and pixel values
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.
Specifications
Specification |
---|
CSS Fill and Stroke Module Level 3 # stroke-dasharray |
Browser compatibility
BCD tables only load in the browser