This article needs a technical review. How you can help.

« SVG Attribute reference home

This attribute lets the author specify a total length for the path, in whatever units the author chooses. 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.

Usage context

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


Real numbers are specified in one of two ways. When used in a stylesheet, a <number> is defined as follows:

number ::= integer
           | [+-]? [0-9]* "." [0-9]+

This syntax is the same as the definition in CSS (CSS2, section 4.3.1).

When used in an SVG attribute, a <number> is defined differently, to allow numbers with large magnitudes to be specified more concisely:

number ::= integer ([Ee] integer)?
           | [+-]? [0-9]* "." [0-9]+ ([Ee] integer)?

Within the SVG DOM, a <number> is represented as a float, SVGNumber or a SVGAnimatedNumber.


Source code Output result

Unable to find file pathLength.svg

Unable to find file pathLength.svg

The primary thing to note here is that this example is using pathLength to tell the SVG renderer that the path is 200 units long, even though it's only 100 CSS pixels long. This, in combination with the 100-pixel on/100-pixel off dash stroke leads the stroke to appear to use only half the length of the real path.


The following elements can use the pathLength attribute:

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support ? 6.0 (6.0) ? ? ?
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: kscarfone, Jeremie, Sheppy
 Last updated by: kscarfone,