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"
< 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"
< 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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...