pathLength

« 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

<number>

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.

Example

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.

Elements

The following elements can use the pathLength attribute:

• <path>

Browser compatibility