MDN wants to learn about developers like you:


« SVG Attribute reference home

This attribute lets the author specify a total length for the path, in user units. This value is then used to calibrate the browser's distance calculations with those of the author, by scaling all distance computations using the ratio pathLength/(computed value of path length).

This can affect the actual rendered lengths of paths; including text paths, animation paths, and various stroke operations. Basically, all computations that require the length of the path. stroke-dasharray, for example, will assume the start of the path being 0 and the end point the value defined in the pathLength attribute.

Usage context

Categories None
Value <number>
Animatable Yes
Normative document SVG 1.1 (2nd Edition): pathLength attribute


<svg width="200" height="100" xmlns="" xmlns:xlink="" version="1.1">
  <path pathLength="100" stroke-dasharray="90" fill="none" stroke="black" stroke-width="2" d="m 0,0 100,100 -50,-75 0,50 z"/>
  <path stroke-dasharray="90" fill="none" stroke="black" stroke-width="2" d="m 100,0 100,100 -50,-75 0,50 z"/>

ScreenshotLive sample

The path on the left has its pathLength set to 100, making the stroke-dasharray effectively cover 90% of the path, instead of only 90 user units like the path on the right.


The following elements can use the pathLength attribute:

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) 6.0 (6.0) No support (Yes) No support
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? 6.0 (6.0) ? ? ?


Document Tags and Contributors

 Contributors to this page: bunnybooboo, DGruenwald, kscarfone, Jeremie, Sheppy
 Last updated by: bunnybooboo,