The stroke-dasharray
attribute is a presentation attribute defining the pattern of dashes and gaps used to paint the outline of the shape;
Note: As a presentation attribute, stroke-dasharray
can be used as a CSS property.
As a presentation attribute, it can be applied to any element, but it only has effect on the following twelve elements:
html,body,svg { height:100% }
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> <!-- No dashes nor gaps --> <line x1="0" y1="1" x2="30" y2="1" stroke="black" /> <!-- Dashes and gaps of the same size --> <line x1="0" y1="3" x2="30" y2="3" stroke="black" stroke-dasharray="4" /> <!-- Dashes and gaps of different sizes --> <line x1="0" y1="5" x2="30" y2="5" stroke="black" stroke-dasharray="4 1" /> <!-- Dashes and gaps of various sizes with an odd number of values --> <line x1="0" y1="7" x2="30" y2="7" stroke="black" stroke-dasharray="4 1 2" /> <!-- Dashes and gaps of various sizes with an even number of values --> <line x1="0" y1="9" x2="30" y2="9" stroke="black" stroke-dasharray="4 1 2 3" /> </svg>
Usage notes
Value | none | <dasharray> |
---|---|
Default value | none |
Animatable | Yes |
- <dasharray>
-
A list of comma and/or white space separated <length>s and <percentage>s that specify the lengths of alternating dashes and gaps.
If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus,
5,3,2
is equivalent to5,3,2,5,3,2
.
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
stroke-dasharray | Chrome ? | Edge ? | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
Legend
- Compatibility unknown
- Compatibility unknown
Specification
Specification | Status | Comment |
---|---|---|
Scalable Vector Graphics (SVG) 2 The definition of 'stroke-dasharray' in that specification. |
Candidate Recommendation | Definition for shapes and texts |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'stroke-dasharray' in that specification. |
Recommendation | Initial definition for shapes and texts |