A path represents the outline of a shape which can be filled or stroked. A path can also be used as a clipping path, to describe animation, or position text. A path can be used for more than one of these functions at the same time. (SeeFilling, Stroking and Paint Servers,Clipping and Masking, Animation ('animateMotion'), andText on a Path.)
A path is described using the concept of a current point. Inan analogy with drawing on paper, the current point can bethought of as the location of the pen. The position of the pencan be changed, and the outline of a shape (open or closed) canbe traced by dragging the pen in either straight lines orcurves.
Paths represent the geometry of the outline of an object,defined in terms ofmoveto (set a new current point),lineto (draw a straight line),curveto (drawa curve using a cubic Bézier),arc (ellipticalor circular arc) andclosepath (close the currentshape by connecting to the lastmoveto) commands.Compound paths (i.e., a path with multiple subpaths) arepossible to allow effects such as "donut holes" in objects.
This chapter describes the syntax, behavior and DOMinterfaces for SVG paths. Various implementation notes for SVGpaths can be found in‘path’ element implementationNotes.
A path is defined in SVG using the‘path’ element.
Thebasic shapes are all described in terms of what theirequivalent path is, which iswhat their shape is as a path. (The equivalent path of a‘path’ element is simply the path itself.)In order to define the basic shapes as equivalent paths,asegment-completing close path operation is defined,which cannot currently be represented in the basic path syntax.
The outline of a shape for a‘path’ element is specified using thedproperty. SeePath data below.
A path is defined by including a‘path’element on which thed property specifies thepath data. The path data contains themoveto,lineto,curveto (both cubic andquadratic Béziers),arc andclosepathinstructions.
Example triangle01specifies a path in the shape of a triangle. (TheM indicates amoveto, theLs indicatelinetos, and thez indicates aclosepath).
<?xml version="1.0" standalone="no"?><svg width="4cm" height="4cm" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Example triangle01- simple example of a 'path'</title> <desc>A path that draws a triangle</desc> <rect x="1" y="1" width="398" height="398" fill="none" stroke="blue" /> <path d="M 100 100 L 300 100 L 200 300 z" fill="red" stroke="blue" stroke-width="3" /></svg>
Example triangle01
Path data can contain newline characters and thus can bebroken up into multiple lines to improve readability.Newlines inside attributes in markup will be normalized to spacecharacters while parsing.
The syntax of path data is concise in order to allow forminimal file size and efficient downloads, since many SVG fileswill be dominated by their path data. Some of the ways that SVGattempts to minimize the size of path data are as follows:
M 100 100 L 200 200M100 100L200 200M 100 200 L 200 100 L -100 -200M 100 200 L 200 100 -100 -200The path data syntax is a prefix notation (i.e., commandsfollowed by parameters). The only allowable decimal point is aUnicodeU+0046 FULL STOP (".") character (also referred to in Unicode asPERIOD, dot and decimal point) and no other delimitercharacters are allowed [UNICODE].(For example, the following is aninvalid numeric value in a path data stream: "13,000.56".Instead, say: "13000.56".)
For the relative versions of the commands, all coordinatevalues are relative to the current point at the start of thecommand.
In the tables below, the following notation is used todescribe the syntax of a given path command:
In the description of the path commands,cpx andcpy represent the coordinates of the current point.
| Name: | d |
|---|---|
| Value: | none |<string> |
| Initial: | none |
| Applies to: | ‘path’ |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Computed value: | as specified |
| Animatable: | yes |
Thed property is used to specify the shape of a‘path’ element.
The valuenone indicates that there is nopath data for the element. For‘path’ elements, this means that theelement does not render or contribute to thebounding box of ancestorcontainer elements.
A path is made up of multiple segments, and every command, either explicitor implicit, other than moveto or closepath,defines onepath segment.
All coordinates and lengths specified within path data must be treated asbeing inuser units in the current user coordinate system.
The<string> valuespecifies a shape using a path data string. The contents of the<string> value must match thesvg-pathEBNF grammar defined below, and errors within the string are handled according tothe rules in thePath Data Error Handling section.If the path data string contains no valid commands, then the behavioris the same as thenone value.
For animation, twod property values can only be interpolated smoothly when the path data strings contain have the same structure, (i.e. exactly the same number and types of path data commands which are in the same order). If an animation is specified and the lists of path data commands do not have the same structure, then the values must beinterpolated using thediscrete animation type.
If the list of path data commands have the same structure, then each parameter to each path data command must beinterpolated separatelyas real numbers. Flags and booleans must be interpolated as fractions between zero and one, with any non-zero value considered to be a value of one/true.
Resolved that "d will become a presentation attribute (no name change) with path data string as value" atLondon Editor's Meeting.
The following sections list the commands that canbe usedin path data strings. Those thatdraw straight line segments include thelineto commands(L,l,H,h,V andv)and theclose path commands(Z andz). These three groups of commands draw curves:
The "moveto" commands (M orm) must establish a newinitial pointand a new current point. The effect is as if the "pen" were lifted and moved toa new location. A path data segment (if there is one) must begin with a "moveto"command. Subsequent "moveto" commands (i.e., when the "moveto"is not the first command) represent the start of a newsubpath:
| Command | Name | Parameters | Description |
|---|---|---|---|
| M (absolute) m (relative) | moveto | (x y)+ | Start a new sub-path at the given (x,y) coordinates.M (uppercase) indicates that absolute coordinates will follow;m (lowercase) indicates that relative coordinates will follow. If a moveto is followed by multiple pairs of coordinates, the subsequent pairs are treated as implicit lineto commands. Hence, implicit lineto commands will be relative if the moveto is relative, and absolute if the moveto is absolute. If a relative moveto (m) appears as the first element of the path, then it is treated as a pair of absolute coordinates. In this case, subsequent pairs of coordinates are treated as relative even though the initial moveto is interpreted as an absolute moveto. |
When a relativem command is used, theposition moved to is (cpx +x,cpy +y).
The "closepath" (Z orz) ends the current subpath by connecting it back to itsinitial point. An automatic straight line is drawn from the current point to theinitial point of the current subpath. Thispath segment may be of zero length.
If a "closepath" is followed immediately by a "moveto", then the "moveto" identifies the start point of the next subpath. If a "closepath" is followed immediately by any other command, then the next subpath starts at the same initial point as the current subpath.
When a subpath ends in a "closepath," it differs in behavior from what happens when "manually" closing a subpath via a "lineto" command in how‘stroke-linejoin’ and‘stroke-linecap’ are implemented. With "closepath", the end of the final segment of the subpath is "joined" with the start of the initial segment of the subpath using the current value of‘stroke-linejoin’. If you instead "manually" close the subpath via a "lineto" command, the start of the first segment and the end of the last segment are not joined but instead are each capped using the current value of‘stroke-linecap’. At the end of the command, the new current point is set to the initial point of the current subpath.
| Command | Name | Parameters | Description |
|---|---|---|---|
| Z or z | closepath | (none) | Close the current subpath by connecting it back to the current subpath'sinitial point (see prose above). Since theZ andz commands take no parameters, they have an identical effect. |
Aclosed subpath must be closed with a"closepath" command, this "joins" the first and lastpath segments.Any other path is anopen subpath.
Aclosed subpath differs in behaviorfrom anopen subpath whose final coordinate is theinitial pointof the subpath.The first and lastpath segments of anopen subpath will not bejoined, even when the final coordinate of the lastpath segment is theinitial point of the subpath. This will result in the first and lastpath segments being capped using the current value ofstroke-linecaprather than joined using the current value ofstroke-linejoin.
If a "closepath" is followed immediately by a"moveto", then the "moveto" identifies the start point of thenext subpath. If a "closepath" is followed immediately by anyother command, then the next subpath must start at the sameinitial pointas the current subpath.
In order to represent the basic shapes as equivalent paths,there must be a way to close curved shapeswithout introducing an additional straight-line segment(even if that segment would have zero length).For that purpose, a segment-completing close path operation is defined here.
Asegment-completing close path operationcombines with the previous path command,with two effects:
Segment-completing close path operations are not currently supportedas a command in the path data syntax.The working group has proposed such a syntax for future versions of the specification.
The various "lineto" commands draw straight lines from thecurrent point to a new point:
| Command | Name | Parameters | Description |
|---|---|---|---|
| L (absolute) l (relative) | lineto | (x y)+ | Draw a line from the current point to the given (x,y) coordinate which becomes the new current point.L (uppercase) indicates that absolute coordinates will follow;l (lowercase) indicates that relative coordinates will follow. A number of coordinates pairs may be specified to draw a polyline. At the end of the command, the new current point is set to the final set of coordinates provided. |
| H (absolute) h (relative) | horizontal lineto | x+ | Draws a horizontal line from the current point.H (uppercase) indicates that absolute coordinates will follow;h (lowercase) indicates that relative coordinates will follow. Multiple x values can be provided (although usually this doesn't make sense). AnH orh command is equivalent to anL orl command with 0 specified for the y coordinate. At the end of the command, the new current point is taken from the final coordinate value. |
| V (absolute) v (relative) | vertical lineto | y+ | Draws a vertical line from the current point.V (uppercase) indicates that absolute coordinates will follow;v (lowercase) indicates that relative coordinates will follow. Multiple y values can be provided (although usually this doesn't make sense). AV orv command is equivalent to anL orl command with 0 specified for the x coordinate. At the end of the command, the new current point is taken from the final coordinate value. |
When a relativel command is used, theend point of the line is (cpx +x,cpy +y).
When a relativeh command is used,the end point of the line is (cpx +x,cpy). This meansthat anh command with a positivexvalue draws a horizontal line in the direction of the positive x-axis.
When a relativev command is used,the end point of the line is (cpx,cpy +y).
The cubic Bézier commands are as follows:
| Command | Name | Parameters | Description |
|---|---|---|---|
| C (absolute) c (relative) | curveto | (x1 y1 x2 y2 x y)+ | Draws a cubic Bézier curve from the current point to (x,y) using (x1,y1) as the control point at the beginning of the curve and (x2,y2) as the control point at the end of the curve.C (uppercase) indicates that absolute coordinates will follow;c (lowercase) indicates that relative coordinates will follow. Multiple sets of coordinates may be specified to draw a polybézier. At the end of the command, the new current point becomes the final (x,y) coordinate pair used in the polybézier. |
| S (absolute) s (relative) | shorthand/smooth curveto | (x2 y2 x y)+ | Draws a cubic Bézier curve from the current point to (x,y). The first control point is assumed to be the reflection of the second control point on the previous command relative to the current point. (If there is no previous command or if the previous command was not an C, c, S or s, assume the first control point is coincident with the current point.) (x2,y2) is the second control point (i.e., the control point at the end of the curve).S (uppercase) indicates that absolute coordinates will follow;s (lowercase) indicates that relative coordinates will follow. Multiple sets of coordinates may be specified to draw a polybézier. At the end of the command, the new current point becomes the final (x,y) coordinate pair used in the polybézier. |
When a relativec orscommand is used, each of the relative coordinate pairsis computed as for those in anm command.For example, the final control point of the curve ofboth commands is (cpx +x,cpy +y).
Example cubic01 shows somesimple uses of cubic Bézier commands within a path. Theexample uses an internal CSS style sheet to assign stylingproperties. Note that the control point for the "S" command iscomputed automatically as the reflection of the control pointfor the previous "C" command relative to the start point of the"S" command.
<?xml version="1.0" standalone="no"?><svg width="5cm" height="4cm" viewBox="0 0 500 400" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Example cubic01- cubic Bézier commands in path data</title> <desc>Picture showing a simple example of path data using both a "C" and an "S" command, along with annotations showing the control points and end points</desc> <style type="text/css"><![CDATA[ .Border { fill:none; stroke:blue; stroke-width:1 } .Connect { fill:none; stroke:#888888; stroke-width:2 } .SamplePath { fill:none; stroke:red; stroke-width:5 } .EndPoint { fill:none; stroke:#888888; stroke-width:2 } .CtlPoint { fill:#888888; stroke:none } .AutoCtlPoint { fill:none; stroke:blue; stroke-width:4 } .Label { font-size:22; font-family:Verdana } ]]></style> <rect x="1" y="1" width="498" height="398" /> <polyline points="100,200 100,100" /> <polyline points="250,100 250,200" /> <polyline points="250,200 250,300" /> <polyline points="400,300 400,200" /> <path d="M100,200 C100,100 250,100 250,200 S400,300 400,200" /> <circle cx="100" cy="200" r="10" /> <circle cx="250" cy="200" r="10" /> <circle cx="400" cy="200" r="10" /> <circle cx="100" cy="100" r="10" /> <circle cx="250" cy="100" r="10" /> <circle cx="400" cy="300" r="10" /> <circle cx="250" cy="300" r="9" /> <text x="25" y="70">M100,200 C100,100 250,100 250,200</text> <text x="325" y="350" >S400,300 400,200</text></svg>
Example cubic01
The following picture shows some how cubic Béziercurves change their shape depending on the position of thecontrol points. The first five examples illustrate a singlecubic Bézierpath segment. The example at the lowerright shows a "C" command followed by an "S" command.
Viewthis example as SVG (SVG-enabled browsers only)
The quadratic Bézier commands are as follows:
| Command | Name | Parameters | Description |
|---|---|---|---|
| Q (absolute) q (relative) | quadratic Bézier curveto | (x1 y1 x y)+ | Draws a quadratic Bézier curve from the current point to (x,y) using (x1,y1) as the control point.Q (uppercase) indicates that absolute coordinates will follow;q (lowercase) indicates that relative coordinates will follow. Multiple sets of coordinates may be specified to draw a polybézier. At the end of the command, the new current point becomes the final (x,y) coordinate pair used in the polybézier. |
| T (absolute) t (relative) | Shorthand/smooth quadratic Bézier curveto | (x y)+ | Draws a quadratic Bézier curve from the current point to (x,y). The control point is assumed to be the reflection of the control point on the previous command relative to the current point. (If there is no previous command or if the previous command was not a Q, q, T or t, assume the control point is coincident with the current point.)T (uppercase) indicates that absolute coordinates will follow;t (lowercase) indicates that relative coordinates will follow. At the end of the command, the new current point becomes the final (x,y) coordinate pair used in the polybézier. |
When a relativeq ortcommand is used, each of the relative coordinate pairsis computed as for those in anm command.For example, the final control point of the curve ofboth commands is (cpx +x,cpy +y).
Example quad01 shows somesimple uses of quadratic Bézier commands within a path.Note that the control point for the "T" command is computedautomatically as the reflection of the control point for theprevious "Q" command relative to the start point of the "T"command.
<?xml version="1.0" standalone="no"?><svg width="12cm" height="6cm" viewBox="0 0 1200 600" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Example quad01 - quadratic Bézier commands in path data</title> <desc>Picture showing a "Q" a "T" command, along with annotations showing the control points and end points</desc> <rect x="1" y="1" width="1198" height="598" fill="none" stroke="blue" stroke-width="1" /> <path d="M200,300 Q400,50 600,300 T1000,300" fill="none" stroke="red" stroke-width="5" /> <!-- End points --> <g fill="black" > <circle cx="200" cy="300" r="10"/> <circle cx="600" cy="300" r="10"/> <circle cx="1000" cy="300" r="10"/> </g> <!-- Control points and lines from end points to control points --> <g fill="#888888" > <circle cx="400" cy="50" r="10"/> <circle cx="800" cy="550" r="10"/> </g> <path d="M200,300 L400,50 L600,300 L800,550 L1000,300" fill="none" stroke="#888888" stroke-width="2" /></svg>
Example quad01
| SVG 2 Requirement: | Make it simpler to draw arcs in SVG path syntax. |
|---|---|
| Resolution: | Make arcs in paths easier. |
| Purpose: | To make it easier for authors to write path data with arcs by hand. |
| Owner: | Cameron (ACTION-3151) |
The elliptical arc commands are as follows:
| Command | Name | Parameters | Description |
|---|---|---|---|
| A (absolute) a (relative) | elliptical arc | (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+ | Draws an elliptical arc from the current point to (x,y). The size and orientation of the ellipse are defined by two radii (rx,ry) and anx-axis-rotation, which indicates how the ellipse as a whole is rotated, in degrees, relative to the current coordinate system. The center (cx,cy) of the ellipse is calculated automatically to satisfy the constraints imposed by the other parameters.large-arc-flag andsweep-flag contribute to the automatic calculations and help determine how the arc is drawn. |
When a relativea command is used, the end pointof the arc is (cpx +x,cpy +y).
Example arcs01 shows somesimple uses of arc commands within a path.
<?xml version="1.0" standalone="no"?><svg width="12cm" height="5.25cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Example arcs01 - arc commands in path data</title> <desc>Picture of a pie chart with two pie wedges and a picture of a line with arc blips</desc> <rect x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="1" /> <path d="M300,200 h-150 a150,150 0 1,0 150,-150 z" fill="red" stroke="blue" stroke-width="5" /> <path d="M275,175 v-150 a150,150 0 0,0 -150,150 z" fill="yellow" stroke="blue" stroke-width="5" /> <path d="M600,350 l 50,-25 a25,25 -30 0,1 50,-25 l 50,-25 a25,50 -30 0,1 50,-25 l 50,-25 a25,75 -30 0,1 50,-25 l 50,-25 a25,100 -30 0,1 50,-25 l 50,-25" fill="none" stroke="red" stroke-width="5" /></svg>
Example arcs01
The elliptical arc command draws a section of an ellipsewhich must meet the following constraints:
For most situations, there are actually four different arcs(two different ellipses, each with two different arc sweeps)that satisfy these constraints.large-arc-flagandsweep-flag indicate which one of the fourarcs are drawn, as follows:
The following illustrates the four combinations oflarge-arc-flag andsweep-flagand the four different arcs that will be drawn based on thevalues of these flags. For each case, the following path datacommand was used:
<path d="M 125,75 a100,50 0 ?,? 100,50" />
where "?,?" is replaced by "0,0" "0,1" "1,0" and "1,1" togenerate the four possible cases.
Viewthis example as SVG (SVG-enabled browsers only)
Refer to the section onOut-of-range elliptical arc parametersfor detailed implementation notes forthe path data elliptical arc commands.
TheImplementation Notes appendixhas relevant formulae for software that needs to convertSVG arc notation to a format that uses center points and arc sweeps.
SVG path data matches the following EBNF grammar.
svg_path::= wsp* moveto? (moveto drawto_command*)?drawto_command::= moveto | closepath | lineto | horizontal_lineto | vertical_lineto | curveto | smooth_curveto | quadratic_bezier_curveto | smooth_quadratic_bezier_curveto | elliptical_arcmoveto::= ( "M" | "m" ) wsp* coordinate_pair_sequenceclosepath::= ("Z" | "z")lineto::= ("L"|"l") wsp* coordinate_pair_sequencehorizontal_lineto::= ("H"|"h") wsp* coordinate_sequencevertical_lineto::= ("V"|"v") wsp* coordinate_sequencecurveto::= ("C"|"c") wsp* curveto_coordinate_sequencecurveto_coordinate_sequence::= coordinate_pair_triplet | (coordinate_pair_triplet comma_wsp? curveto_coordinate_sequence)smooth_curveto::= ("S"|"s") wsp* smooth_curveto_coordinate_sequencesmooth_curveto_coordinate_sequence::= coordinate_pair_double | (coordinate_pair_double comma_wsp? smooth_curveto_coordinate_sequence)quadratic_bezier_curveto::= ("Q"|"q") wsp* quadratic_bezier_curveto_coordinate_sequencequadratic_bezier_curveto_coordinate_sequence::= coordinate_pair_double | (coordinate_pair_double comma_wsp? quadratic_bezier_curveto_coordinate_sequence)smooth_quadratic_bezier_curveto::= ("T"|"t") wsp* coordinate_pair_sequenceelliptical_arc::= ( "A" | "a" ) wsp* elliptical_arc_argument_sequenceelliptical_arc_argument_sequence::= elliptical_arc_argument | (elliptical_arc_argument comma_wsp? elliptical_arc_argument_sequence)elliptical_arc_argument::= number comma_wsp? number comma_wsp? number comma_wsp flag comma_wsp? flag comma_wsp? coordinate_paircoordinate_pair_double::= coordinate_pair comma_wsp? coordinate_paircoordinate_pair_triplet::= coordinate_pair comma_wsp? coordinate_pair comma_wsp? coordinate_paircoordinate_pair_sequence::= coordinate_pair | (coordinate_pair comma_wsp? coordinate_pair_sequence)coordinate_sequence::= coordinate | (coordinate comma_wsp? coordinate_sequence)coordinate_pair::= coordinate comma_wsp? coordinatecoordinate::= sign? numbersign::= "+"|"-"number ::= ([0-9])+flag::=("0"|"1")comma_wsp::=(wsp+ ","? wsp*) | ("," wsp*)wsp ::= (#x9 | #x20 | #xA | #xC | #xD)The processing of the EBNF must consume as much of a givenEBNF production as possible, stopping at the point when acharacter is encountered which no longer satisfies theproduction. Thus, in the string "M 100-200", the firstcoordinate for the "moveto" consumes the characters "100" andstops upon encountering the minus sign because the minus signcannot follow a digit in the production of a "coordinate". Theresult is that the first coordinate will be "100" and thesecond coordinate will be "-200".
Similarly, for the string "M 0.6.5", the first coordinate ofthe "moveto" consumes the characters "0.6" and stops uponencountering the second decimal point because the production ofa "coordinate" only allows one decimal point. The result isthat the first coordinate will be "0.6" and the secondcoordinate will be ".5".
Note that the EBNF allows the path data string in thed property to be empty. This is notan error, instead it disables rendering of the path.Rendering is also disabled when thed propertyhas the valuenone.
If path data not matching the grammar is encountered, then the path data is in error(seeError Handling).
Some features, such as theorientationofmarkers and theshapes ofline caps, are defined in terms ofthe direction of the path at a given distance along the path or at thestart or end of an individual segment.
Thedirection of a path at a specifieddistance along the path is defined as follows:
Thedirection at the startof apath segment is defined as follows:
Thedirection at the end of a pathsegment is defined as follows:
A conforming SVG user agent must implement features that use path dataaccording to the following details:
Arbitrary numerical values are permitted for all elliptical arc parameters(other than the boolean flags),but user agents must make the following adjustments for invalid valueswhen rendering curves or calculating their geometry:
If the endpoint (x,y) of the segment is identical to the current point (e.g., the endpoint of the previous segment), then this is equivalent to omitting the elliptical arc segment entirely.
If eitherrx orry is 0, then this arc is treated as a straight line segment (a "lineto") joining the endpoints.
If eitherrx orry have negative signs, these are dropped; the absolute value is used instead.
Ifrx,ry andx-axis-rotation are such that there is no solution (basically, the ellipse is not big enough to reach from the current point to the new endpoint) then the ellipse is scaled up uniformly until there is exactly one solution (until the ellipse is just big enough).
See the appendix sectionCorrection of out-of-range radii for mathematical formula for this scaling operation.
This forgiving yet consistent treatment of out-of-rangevalues ensures that:
The S/s and T/t commands indicate that the first control point of the given cubic Bézier segment is calculated by reflecting the previous path segment's final control point relative to the current point. The exact math is as follows.
If the current point is (curx,cury) and the final control point of the previouspath segment is (oldx2,oldy2), then the reflected point (i.e., (newx1,newy1), the first control point of the currentpath segment) is:
(newx1, newy1) = (curx - (oldx2 - curx), cury - (oldy2 - cury)) = (2*curx - oldx2, 2*cury - oldy2)
Path segments with zero length are not invalid,and will affect rendering in the following cases:
Various operations, includingtext on a path andmotion animationand variousstrokeoperations, require that the user agent compute thedistance along the geometry of a graphics element, such as a‘path’.
Exact mathematics exist for computing distance along a path,but the formulas are highly complex and require substantialcomputation. It is recommended that authoring products and useragents employ algorithms that produce as precise results aspossible; however, to accommodate implementation differencesand to help distance calculations produce results thatapproximate author intent, the‘pathLength’ attribute can be usedto provide the author's computation of the total length of thepath so that the user agent can scale distance-along-a-pathcomputations by the ratio of‘pathLength’ to the user agent's owncomputed value for total path length.
A "moveto" operation within a‘path’ element is defined to havezero length. Only the various "lineto", "curveto" and "arcto"commands contribute to path length calculations.
| Name | Value | Initial value | Animatable |
|---|---|---|---|
| pathLength | <number> | (none) | yes |
The author's computation of the total length of the path, in user units. This value is used to calibrate the user agent's owndistance-along-a-path calculations with that of the author. The user agent will scale all distance-along-a-path computations by the ratio of‘pathLength’ to the user agent's own computed value for total path length.‘pathLength’ potentially affects calculations fortext on a path,motion animation and variousstroke operations.
A value of zero is valid and must be treated as a scaling factor of infinity. A value of zero scaled infinitely must remain zero, while any non-percentage value greater than zero must become +Infinity.
A negative value is an error (seeError handling).
‘pathLength’ has no effect on percentagedistance-along-a-path calculations.
AnSVGPathElement object represents a‘path’ in the DOM.
[Exposed=Window]interfaceSVGPathElement :SVGGeometryElement {};