strokeDasharray

Stroke-dasharray, commonly written as stroke-dasharray, is an SVG attribute and a CSS property that defines the pattern of dashes and gaps drawn along the stroke of a shape, such as a path, line, or circle. It does not fill the interior; it only affects the outline.

The value of stroke-dasharray is a list of lengths in the current user coordinate system. Each number specifies the length of a dash, followed by the length of a gap, and the pattern repeats along the path. If a single value is provided, it is used for both the dash and the gap. A dash offset can be set with stroke-dashoffset to shift the starting point of the pattern along the path.

Dash pattern lengths are expressed in user units and can be affected by transforms. If the element is scaled or otherwise transformed, the dash lengths scale with the transformation. The appearance is also influenced by related properties such as stroke-width and linecap, which can alter the perceived thickness and the ends of dashes.

Common uses include decorative or technical diagrams, chart axes, and animated effects where a line appears to draw itself. For example, a pattern like 5 3 creates a repeated sequence of a 5-unit dash and a 3-unit gap. Stroke-dasharray is widely supported in modern browsers for SVG content and can be applied via inline styles or CSS rules.