The stroke-dashoffset property controls where along a shape's outline the dash pattern begins by shifting the dash pattern forward or backward along the path. In effect it does not change the dashes themselves but repositions the entire sequence of dashes and gaps relative to the path's starting point, so the visible pattern appears to slide along the stroke. The offset operates in the path's coordinate space and follows the path's direction: changing the path direction (for example by reversing the point order) changes which way positive offsets move the pattern.

This property is most often used together with a dash pattern set by stroke-dasharray. While the dash array defines the lengths of dashes and gaps, stroke-dashoffset determines the initial phase of that repeating pattern. Visual details such as how each dash terminates and how gaps look are influenced by stroke-related properties like stroke-linecap, the stroke thickness from stroke-width, and the stroke color specified by stroke. Because the offset simply translates the pattern along the path, changes to those other properties affect the final rendered appearance but not the relative shift the offset produces.

A common practical use is creating "draw-on" or sliding-dash animations: by combining stroke-dashoffset animation with an appropriate dash pattern you can make a path appear to be progressively drawn or to have dashes march along it. For example, designers often set a dash pattern that equals the path length and then animate the offset so the path appears to reveal itself. When animating, be aware the offset is measured in the path's units and can produce subpixel results; you can also control whether a stroke scales with transforms (which affects perceived offset) using effects like vector-effect.

Behavior across complex shapes: within a single SVG path element the dash pattern and offset continue across subpaths—so the pattern does not automatically restart at each move command—whereas separate path elements are independent. Because stroke-dashoffset is relative to the path geometry and its start point, small changes to the path coordinates, element order, or transforms can produce noticeably different visual alignments. For best results, plan the path direction and use consistent units and transforms so the offset produces the expected visual rhythm.