Questions tagged [stroke-dasharray]

The stroke-dasharray attribute controls the pattern of dashes and gaps used to stroke paths.

As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet

It's a list of comma and/or white space separated s and 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 to 5,3,2,5,3,2. Example

Source code Output result

<line stroke-dasharray="5, 5"              x1="10" y1="10" x2="190" y2="10" />
<line stroke-dasharray="5, 10"             x1="10" y1="30" x2="190" y2="30" />
<line stroke-dasharray="10, 5"             x1="10" y1="50" x2="190" y2="50" />
<line stroke-dasharray="5, 1"              x1="10" y1="70" x2="190" y2="70" />
<line stroke-dasharray="1, 5"              x1="10" y1="90" x2="190" y2="90" />
<line stroke-dasharray="0.9"               x1="10" y1="110" x2="190" y2="110" />
<line stroke-dasharray="15, 10, 5"         x1="10" y1="130" x2="190" y2="130" />
<line stroke-dasharray="15, 10, 5, 10"     x1="10" y1="150" x2="190" y2="150" />
<line stroke-dasharray="15, 10, 5, 10, 15" x1="10" y1="170" x2="190" y2="170" />
<line stroke-dasharray="5, 5, 1, 5"        x1="10" y1="190" x2="190" y2="190" />

Source:

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray