stroke-dashoffset

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨March 2020⁩.

The stroke-dashoffset attribute is a presentation attribute defining an offset on the rendering of the associated dash array.

Note: As a presentation attribute, stroke-dashoffset also has a CSS property counterpart: stroke-dashoffset. When both are specified, the CSS property takes priority.

You can use this attribute with the following SVG elements:

Example

Usage notes

Value	<percentage> \| <length>
Default value	`0`
Animatable	Yes

The offset is usually expressed in user units resolved against the pathLength but if a <percentage> is used, the value is resolved as a percentage of the current viewport.