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:
<!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:
<!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>
Output:
