Your Search Results

    pathLength Redirect 1

    « 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: Jeremie
    Last updated by: Jeremie,