CSS stroke-dashoffset Property

Last Updated : 16 Oct, 2024

The stroke-dashoffset property is used to set the location along an SVG path where the dash pattern of a stroke will begin. A higher value means that the dash will start at a further location.

Syntax

stroke-dasharray: <length> | <percentage>

Property Values

length: It is used to set the offset in length units. The values are resolved on the basis of the path length of the element.
percentage: It is used to set the offset in percentage values. The values are resolved as a percentage of the current viewport.

Example 1: Here the stroke-dashoffset CSS property, adjusting the starting point of dashed lines in an SVG. Three lines are styled with different offsets and colors.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS stroke-dashoffset Property
    </title>
    <style>
        .stroke1 {
            stroke-dashoffset: 0;

            stroke: green;
            stroke-dasharray: 40;
            stroke-width: 20px;
        }

        .stroke2 {
            stroke-dashoffset: 15px;

            stroke: red;
            stroke-dasharray: 40;
            stroke-width: 20px;
        }

        .stroke3 {
            stroke-dashoffset: 30px;

            stroke: orange;
            stroke-dasharray: 40;
            stroke-width: 20px;
        }
    </style>
</head>

<body>
    <b>
        CSS stroke-dashoffset
    </b>
    <div class="container">
        <svg width="400px" xmlns="http://www.w3.org/2000/svg" version="1.1">
            <line class="stroke1" x1="0" x2="350" y1="20" y2="20" />
            <line class="stroke2" x1="0" x2="350" y1="70" y2="70" />
            <line class="stroke3" x1="0" x2="350" y1="120" y2="120" />
        </svg>
    </div>
</body>

</html>

Output:

CSS stroke-dashoffset Property Example Output

Example 2: Setting the offset of the dashes in circles.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS stroke-dashoffset Property
    </title>
    <style>
        .stroke1 {
            stroke-dashoffset: 0;

            stroke: green;
            stroke-dasharray: 40;
            stroke-width: 10px;
        }

        .stroke2 {
            stroke-dashoffset: 15px;

            stroke: red;
            stroke-dasharray: 40;
            stroke-width: 10px;
        }

        .stroke3 {
            stroke-dashoffset: 30px;

            stroke: orange;
            stroke-dasharray: 40;
            stroke-width: 10px;
        }
    </style>
</head>

<body>
    <b>
        CSS stroke-dashoffset Property
    </b>
    <div class="container">
        <svg width="500px" height="250px" 
             xmlns="http://www.w3.org/2000/svg" version="1.1">
            <circle class="stroke1" cx="100" cy="100" r="50" />
            <circle class="stroke2" cx="250" cy="100" r="50" />
            <circle class="stroke3" cx="400" cy="100" r="50" />
        </svg>
    </div>
</body>

</html>