SVG pathLength Attribute

Last Updated : 31 Mar, 2022

The pathLength attribute defines the total length for the path, in user units. The elements which are using this attribute are: <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect>

Syntax:

pathLength = number

Attribute Values: The pathLength attribute accepts the values mentioned above and described below

number: It is either a number with a fractional component or an integer.

Below examples illustrate the use of pathLength attribute.

Example 1:

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        path {
            stroke: green;
            stroke-width: 5;
            stroke-dasharray: 12;
        }
    </style>
</head>

<body>
    <h2 style="color: green;">
        GeeksforGeeks
    </h2>

    <svg viewBox=" 0 0 400 60" 
        xmlns="http://www.w3.org/2000/svg">

        <path d="M 0,10 h100" />

        <path d="M 0,20 h100" pathLength="80" />
    </svg>
</body>

</html>

Output:

Example 2:

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        path {
            stroke: green;
            stroke-width: 5;
            stroke-dasharray: 12;
        }
    </style>
</head>

<body>
    <h2 style="color: green;">
        GeeksforGeeks
    </h2>
    <svg viewBox="0 20 400 60" 
        xmlns="http://www.w3.org/2000/svg">
        <path d="M 0,30 h100" pathLength="60" />
        <path d="M 0,40 h100" pathLength="30" />
        <path d="M 0,50 h100" pathLength="10" />
    </svg>
</body>

</html>