CSS stroke-dashoffset Property

The stroke-dashoffset property is a presentation attribute which defines the location along an SVG path where the dash of a stroke will begin.

CSS rules override presentation attributes. Inline styles take precedence over both.

INFO

The stroke-dashoffset property can be used as both a CSS property and a presentation attribute. It can be applied to any element but can have an effect only on the following elements: <altGlyph>, <circle>, <ellipse>, <path>, <line>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref>, and <tspan>.

INFO

"Px" or "em" units are not required.

Initial Value	0
Applies to	Shapes and text content elements.
Inherited	Yes.
Animatable	Yes.
Version	SVG 1.1 Specification
DOM Syntax	Object.strokeDashoffset = 5;

Syntax

CSS stroke-dashoffset syntax

css

stroke-dashoffset: length | percentage | initial | inherit;

Example of the stroke-dashoffset property:

The stroke-dashoffset value shifts the starting point of the dash pattern along the path.

CSS stroke-dashoffset code example

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Stroke-dashoffset property example</h2>
    <svg viewBox="-3 0 33 10" >
      <line x1="0" y1="1" x2="30" y2="1" stroke="#1c87c9" />
      <line x1="0" y1="3" x2="30" y2="3" stroke="#ccc"
        stroke-dasharray="4 1" />
      <line x1="0" y1="5" x2="30" y2="5" stroke="#8ebf42"
        stroke-dasharray="3 1"
        stroke-dashoffset="3" />
      <line x1="0" y1="7" x2="30" y2="7" stroke="#FF0000"
        stroke-dasharray="3 1"
        stroke-dashoffset="-3" />
      <line x1="0" y1="9" x2="30" y2="9" stroke="#666"
        stroke-dasharray="3 1"
        stroke-dashoffset="1" />
      <path d="M0,5 h-3 M0,7 h3 M0,9 h-1" stroke="#000"/>
    </svg>
  </body>
</html>

Result

CSS stroke-dashoffset values list

Values

Value	Description
length	Sets the length of the property. "Px" or "em" units are not required.
percentage	The property is specified by percentage.
initial	Makes the property use its default value.
inherit	Inherits the property from its parents element.

Practice

What is the purpose of the stroke-dashoffset CSS property and how is it used?

It is used to change the location of the dashes in a dashed line.It specifies the dimensions of the border image.It changes the outline style of an element.It uses <length> values to define the offset of the stroke dash.It accepts only percentage values to define the offset of the stroke dash.

CSS stroke-dashoffset Property ​

Syntax ​

Example of the stroke-dashoffset property: ​

Result ​