Skip to content
Related Articles

Related Articles

SVG pathLength Attribute
  • Last Updated : 09 Dec, 2020

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.

Exmaple 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>

Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :