previous next contents properties index

# 8 Paths

### Contents

## 8.1 Introduction

Paths represent the outline of a shape which can be filled, stroked, (see Filling, Stroking and Paint Servers) used as a clipping path (see Clipping, Masking and Compositing), or for any combination of the three.

A path is described using the concept of a current point. In an analogy with drawing on paper, the current point can be thought of as the location of the pen. The position of the pen can be changed, and the outline of a shape (open or closed) can be traced by dragging the pen in either straight lines or curves.

Paths represent an outline of an object which is defined in terms of moveto (set a new current point), lineto (draw a straight line), curveto (draw a curve using a cubic bezier), arc (elliptical or circular arc) and closepath (close the current shape by drawing a line to the last moveto) elements. Compound paths (i.e., a path with subpaths, each consisting of a single moveto followed by one or more line or curve operations) are possible to allow effects such as "donut holes" in objects.

A path is defined in SVG using the 'path' element.

## 8.2 The 'path' element

    <!ENTITY % pathExt "" >
    <!ELEMENT path (%descTitle;,(animate|set|animateMotion|animateColor|animateTransform
                    %geExt;%pathExt;)*) >
    <!ATTLIST path
      %stdAttrs;
      %langSpaceAttrs;
      class %ClassList; #IMPLIED
      transform %TransformList; #IMPLIED
      %graphicsElementEvents;
      %testAttrs;
      externalResourcesRequired %Boolean; #IMPLIED
      d %PathData; #REQUIRED
      length %Number; #IMPLIED
      %StylableSVG-StyleAttribute;
      %FinalFormSVG-FillStrokeAttrs;
      %FinalFormSVG-GraphicsAttrs;
      %FinalFormSVG-MarkerAttrs; >

Attribute definitions:

d = "path data"
  The definition of the outline of a shape. See Path data.
  Animatable: yes.
length = "<number>"
  The author's computation of the total length of the path, in user units. This value is used to calibrate the user agent's own distance-along-a-path calculations with that of the author. The user agent will scale all distance-along-a-path computations by the ratio of length to the user agent's own computed value for total path length. length potentially affects calculations for text on a path, motion animation and various stroke operations.
  Animatable: yes. Path data animation is only possible when each path data specification within an animation specification has exactly the same list of path data commands as the d attribute. If an animation is specified and the list of path data commands is not the same, then the animation specification is in error (see Error Processing). The animation engine interpolates each parameter to each path data command separately based on the attributes to the given animation element. Any flags/booleans are interpolated as fractions between zero and one, with any non-zero value considered to be a value of one/true.

Attributes defined elsewhere:
  %stdAttrs;, %langSpaceAttrs;, transform, %graphicsElementEvents;, %testAttrs;, %StylableSVG-StyleAttribute;.

## 8.3 Path data

### 8.3.1 General information about path data

A path is defined by including a 'path' element which contains a d="(path data)" attribute, where the d attribute contains the moveto, line, curve (both cubic and quadratic beziers), arc and closepath instructions. The following example specifies a path in the shape of a triangle. (The M indicates a moveto, the L's indicate lineto's, and the z indicates a closepath:

    <?xml version="1.0" standalone="yes"?>
    <svg width="4in" height="3in"
         xmlns = 'http://www.w3.org/2000/svg-20000302-stylable'>
      <path d="M 100 100 L 140 100 L 120 140 z"/>
    </svg>

Download this example

Path data values can contain newline characters and thus can be broken up into multiple lines to improve readability. Because of line length limitations with certain related tools, it is recommended that SVG generators split long path data strings across multiple lines, with each line not exceeding 255 characters. Also note that newline characters are only allowed at certain places within a path data value.

The syntax of path data is very abbreviated in order to allow for minimal file size and efficient downloads, since many SVG files will be dominated by their path data. Some of the ways that SVG attempts to minimize the size of path data are as follows:

- All instructions are expressed as one character (e.g., a moveto is expressed as an M)
- Superfluous white space and separators such as commas can be eliminated (e.g., "M 100 100 L 200 200" contains unnecessary spaces and could be expressed more compactly as "M100 100L200 200")
- The command letter can be eliminated on subsequent commands if the same command is used multiple times in a row (e.g., you can drop the second "L" in "M 100 200 L 200 100 L -100 -200" and use "M 100 200 L 200 100 -100 -200" instead)
- Relative versions of all commands are available (upper case means absolute coordinates, lower case means relative coordinates)
- Alternate forms of lineto are available to optimize the special cases of horizontal and vertical lines (absolute and relative)
- Alternate forms of curve are available to optimize the special cases where some of the control points on the current segment can be determined automatically from the control points on the previous segment

The path data syntax is a prefix notation (i.e., commands followed by parameters). The only allowable decimal point is a period (".") and no other delimiter characters are allowed. (For example, the following is an invalid numeric value in a path data stream: "13,000.56". Instead, say: "13000.56".)

In the tables below, the following notation is used:

- (): grouping of parameters
- +: 1 or more of the given parameter(s) is required

The following sections list the commands.

### 8.3.2 The "moveto" commands

The "moveto" commands (M or m) establish a new current point. The effect is as if the "pen" were lifted and moved to a new location. A path data segment must begin with either one of the "moveto" commands or one of the "arc" commands. Subsequent "moveto" commands (i.e., when the "moveto" is not the first command) represent the start of a new subpath:

Command | Name | Parameters | Description
--- | --- | --- | ---
M (absolute) m (relative) | moveto | (x y)+ | Start a new sub-path at the given (x,y) coordinate. M (uppercase) indicates that absolute coordinates will follow; m (lowercase) indicates that relative coordinates will follow. If a relative moveto (m) appears as the first element of the path, then it is treated as a pair of absolute coordinates. If a moveto is followed by multiple pairs of coordinates, the subsequent pairs are treated as implicit lineto commands.

### 8.3.3 The "closepath" command

The "closepath" (Z or z) causes an automatic straight line to be drawn from the current point to the initial point of the current subpath. "Closepath" 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':

Command | Name | Parameters | Description
--- | --- | --- | ---
Z or z | closepath | (none) | Close the current subpath by drawing a straight line from the current point to current subpath's most recent starting point (usually, the most recent moveto point).

### 8.3.4 The "lineto" commands

The various "lineto" commands draw straight lines from the current 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 (cpx, cpy) to (x, cpy). 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). At the end of the command, the new current point becomes (x, cpy) for the final value of x.
V (absolute) v (relative) | vertical lineto | y+ | Draws a vertical line from the current point (cpx, cpy) to (cpx, y). 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). At the end of the command, the new current point becomes (cpx, y) for the final value of y.

### 8.3.5 The curve commands

These three groups of commands that draw curves:

- Cubic bezier commands (C, c, S and s). A cubic bezier segment is defined by a start point, an end point, and two control points.
- Quadratic bezier commands (Q, q, T and T). A quadratic bezier segment is defined by a start point, an end point, and one control point.
- Elliptical arc commands (A and a). An elliptical arc segment draws a segment of an ellipse.

The cubic bezier commands are as follows:

Command | Name | Parameters | Description
--- | --- | --- | ---
C (absolute) c (relative) | curveto | (x1 y1 x2 y2 x y)+ | Draws a cubic bezier 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 polybezier. At the end of the command, the new current point becomes the final (x,y) coordinate pair used in the polybezier.
S (absolute) s (relative) | shorthand/smooth curveto | (x2 y2 x y)+ | Draws a cubic bezier 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 polybezier. At the end of the command, the new current point becomes the final (x,y) coordinate pair used in the polybezier.

The quadratic bezier commands are as follows:

Command | Name | Parameters | Description
--- | --- | --- | ---
Q (absolute) q (relative) | quadratic bezier curveto | (x1 y1 x y)+ | Draws a quadratic bezier 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 polybezier. At the end of the command, the new current point becomes the final (x,y) coordinate pair used in the polybezier.
T (absolute) t (relative) | Shorthand/smooth quadratic bezier curveto | (x y)+ | Draws a quadratic bezier 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 an 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 polybezier.

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 is defined two radii (rx, ry) and an x-axis-rotation, which indicates how the ellipse as a whole is rotated 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 and sweep-flag contribute to the automatic calculations and help determine how the arc is drawn.

The elliptical arc command draws a section of an ellipse which meets the following constraints:

- the arc starts at the current point
- the arc ends at point (x, y)
- the ellipse has the two radii (rx, ry)
- the X-axis of the ellipse is rotated by x-axis-rotation relative to the X-axis of the current coordinate system.

For most situations, there are actually four different arcs (two different ellipses, each with two different arc sweeps) that satisfy these constraints: (Pictures will be forthcoming in a future version of the spec) large-arc-flag and sweep-flag indicate which one of the four arcs are drawn, as follows:

- Of the four candidate arc sweeps, two will represent an arc sweep of greater than or equal to 180 degrees (the "large-arc"), and two will represent an arc sweep of less than or equal to 180 degrees (the "small-arc"). If large-arc-flag is '1', then one of the two larger arc sweeps will be chosen; otherwise, if large-arc-flag is '0', one of the smaller arc sweeps will be chosen,
- If sweep-flag is '1', then the arc will be drawn in a "positive-angle" direction (i.e., the ellipse formula x=cx+rx*cos(theta) and y=cy+ry*sin(theta) is evaluated such that theta starts at an angle corresponding to the current point and increases positively until the arc reaches (x,y)). A value of 0 causes the arc to be drawn in a "negative-angle" direction (i.e., theta starts at an angle value corresponding to the current point and decreases until the arc reaches (x,y)).

(We need examples to illustrate all of this! Here is one for the moment. Suppose you have a circle with center (5,5) and radius 2 and you wish to draw an arc from 0 degrees to 90 degrees. Then one way to achieve this would be `M 7,5 A 2,2 0 0 1 5,7`. In this example, you move to the "0 degree" location on the circle, which is (7,5), since the center is at (5,5) and the circle has radius 2. Since we have circle, the two radii are the same, and in this example both are equal to 2. Since our sweep is 90 degrees, which is less than 180, we set large-arc-flag to 0. We want to draw the sweep in a positive angle direction, so we set sweep-flag to 1. Since we want to draw the arc to the point which is at the 90 degree location of the circle, we set (x,y) to (5,7).)

### 8.3.6 The grammar for path data

The following notation is used in the BNF description of the grammar for path data:

- *: 0 or more
- +: 1 or more
- ?: 0 or 1
- (): grouping
- |: separates alternatives
- double quotes surround literals

The following is the BNF for SVG paths.

    svg-path:
        wsp* subpaths? wsp*

    subpaths:
        subpath
        | subpath subpaths

    subpath:
        moveto subpath-elements?

    subpath-elements:
        subpath-element
        | subpath-element wsp* subpath-elements

    subpath-element:
        closepath
        | lineto
        | horizontal-lineto
        | vertical-lineto
        | curveto
        | smooth-curveto
        | quadratic-bezier-curveto
        | smooth-quadratic-bezier-curveto
        | elliptical-arc

    moveto:
        ( "M" | "m" ) wsp* moveto-argument-sequence

    moveto-argument-sequence:
        coordinate-pair
        | coordinate-pair comma-wsp? lineto-argument-sequence

    closepath:
        ("Z" | "z")

    lineto:
        ( "L" | "l" ) wsp* lineto-argument-sequence

    lineto-argument-sequence:
        coordinate-pair
        | coordinate-pair comma-wsp? lineto-argument-sequence

    horizontal-lineto:
        ( "H" | "h" ) wsp* horizontal-lineto-argument-sequence

    horizontal-lineto-argument-sequence:
        coordinate
        | coordinate comma-wsp? horizontal-lineto-argument-sequence

    vertical-lineto:
        ( "V" | "v" ) wsp* vertical-lineto-argument-sequence

    vertical-lineto-argument-sequence:
        coordinate
        | coordinate comma-wsp? vertical-lineto-argument-sequence

    curveto:
        ( "C" | "c" ) wsp* curveto-argument-sequence

    curveto-argument-sequence:
        curveto-argument
        | curveto-argument comma-wsp? curveto-argument-sequence

    curveto-argument:
        coordinate-pair comma-wsp? coordinate-pair comma-wsp? coordinate-pair

    smooth-curveto:
        ( "S" | "s" ) wsp* smooth-curveto-argument-sequence

    smooth-curveto-argument-sequence:
        smooth-curveto-argument
        | smooth-curveto-argument comma-wsp? smooth-curveto-argument-sequence

    smooth-curveto-argument:
        coordinate-pair comma-wsp? coordinate-pair

    quadratic-bezier-curveto:
        ( "Q" | "q" ) wsp* quadratic-bezier-curveto-argument-sequence

    quadratic-bezier-curveto-argument-sequence:
        quadratic-bezier-curveto-argument
        | quadratic-bezier-curveto-argument comma-wsp?
            quadratic-bezier-curveto-argument-sequence

    quadratic-bezier-curveto-argument:
        coordinate-pair comma-wsp? coordinate-pair

    smooth-quadratic-bezier-curveto:
        ( "T" | "t" ) wsp* smooth-quadratic-bezier-curveto-argument-sequence

    smooth-quadratic-bezier-curveto-argument-sequence:
        coordinate-pair
        | coordinate-pair comma-wsp? smooth-quadratic-bezier-curveto-argument-sequence

    elliptical-arc:
        ( "A" | "a" ) wsp* elliptical-arc-argument-sequence

    elliptical-arc-argument-sequence:
        elliptical-arc-argument
        | elliptical-arc-argument comma-wsp? elliptical-arc-argument-sequence

    elliptical-arc-argument:
        nonnegative-number comma-wsp? nonnegative-number comma-wsp?
            number comma-wsp? flag comma-wsp? flag comma-wsp? coordinate-pair

    coordinate-pair:
        coordinate comma-wsp? coordinate

    coordinate:
        number

    nonnegative-number:
        integer-constant
        | floating-point-constant

    number:
        sign? integer-constant
        | sign? floating-point-constant

    flag:
        "0" | "1"

    comma-wsp:
        (wsp+ comma? wsp*) | (comma wsp*)

    comma:
        ","

    integer-constant:
        digit-sequence

    floating-point-constant:
        fractional-constant exponent?
        | digit-sequence exponent

    fractional-constant:
        digit-sequence? "." digit-sequence
        | digit-sequence "."

    exponent:
        ( "e" | "E" ) sign? digit-sequence

    sign:
        "+" | "-"

    digit-sequence:
        digit
        | digit digit-sequence

    digit:
        "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9"

    wsp:
        (#x20 | #x9 | #xD | #xA)

The processing of the BNF must consume as much of a given BNF production as possible, stopping at the point when a character is encountered which no longer satisfies the production. Thus, in the string "M 100-200", the first coordinate for the "moveto" consumes the characters "100" and stops upon encountering the minus sign because the minus sign cannot follow a digit in the production of a "coordinate". The result is that the first coordinate will be "100" and the second coordinate will be "-200".

Similarly, for the string "M 0.6.5", the first coordinate of the "moveto" consumes the characters "0.6" and stops upon encountering the second decimal point because the production of a "coordinate" only allows one decimal point. The result is that the first coordinate will be "0.6" and the second coordinate will be ".5".

## 8.4 Distance along a path

Various operations, including text on a path and motion animation and various stroke operations, require that the user agent compute the distance 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 substantial computation. It is recommended that authoring products and user agents employ algorithms that produce as precise results as possible; however, to accommodate implementation differences and to help distance calculations produce results that approximate author intent, the length attribute can be used to provide the author's computation of the total length of the path so that the user agent can scale distance-along-a-path computations by the ratio of length to the user agent's own computed value for total path length.

A "moveto" operation within a 'path' element is defined to have zero length. Only the various "lineto", "curveto" and "arcto" commands contribute to path length calculations.

## 8.5 DOM interfaces

The following interfaces are defined below: SVGPathElement, SVGPathSeg.

### Interface SVGPathElement

The SVGPathElement interface corresponds to the 'path' element.

The SVGPathElement interface provides two lists to access and modify the contents of the d attribute:

- DOM attribute pathSegList provides access to the contents of the d attribute in a form which matches one-for-one with SVG's syntax.
- DOM attribute normalizedPathSegList provides normalized access to the contents of the d attribute where all path data commands are expressed in terms of the following subset of SVGPathSeg types: SVG_PATHSEG_MOVETO_ABS (M), SVG_PATHSEG_LINETO_ABS (L), SVG_PATHSEG_CURVETO_CUBIC_ABS (C) and SVG_PATHSEG_CLOSEPATH (z).

The two lists are always kept synchronized. Modifications to one list will immediately cause the corresponding list to be modified. Modifications to normalizedPathSegList might cause entries in pathSegList to be broken into a set of normalized path segments.

IDL Definition

      interface SVGPathElement : SVGElement, SVGTransformable, SVGLangSpace, SVGTests, EventTarget {
                 attribute DOMString className;
                 attribute SVGNumber length;
        readonly attribute SVGList   pathSegList;
        readonly attribute SVGList   normalizedPathSegList;

      #ifdef STYLABLESVG
                 // The following pre-defined attribute collections are only
                 // available in the DOM for Stylable SVG.
                 STYLABLESVGStyleAttribute;
      #endif STYLABLESVG

      #ifdef FINALFORMSVG
                 // The following pre-defined attribute collections are only
                 // available in the DOM for Final Form SVG.
                 FINALFORMSVGFillStrokeAttrs;
                 FINALFORMSVGGraphicsAttrs;
      #endif FINALFORMSVG

        float         getTotalLength (  );
        SVGPoint      getPointAtLength ( in float distance )
                        raises( SVGException );
        unsigned long getPathSegAtLength ( in float distance )
                        raises( SVGException );
        SVGPathSeg    createSVGPathSeg (  );
      };

Attributes
  DOMString className
    Corresponds to attribute class on the given element.
  SVGNumber length
    Corresponds to attribute length on the given 'path' element.
  readonly SVGList pathSegList

    Provides access to the contents of the d attribute in a form which matches one-for-one with SVG's syntax. Thus, if the d attribute has an "absolute moveto (M)" and an "absolute arcto (A)" command, then pathSegList will have two entries: a SVG_PATHSEG_MOVETO_ABS and a SVG_PATHSEG_ARC_ABS.

    The various methods from SVGList, which are defined to accept parameters and return values of type Object, must receive parameters of type SVGPathSeg and return values of type SVGPathSeg.

  readonly SVGList normalizedPathSegList

    Provides access to the contents of the d attribute in a form where all path data commands are expressed in terms of the following subset of SVGPathSeg types: SVG_PATHSEG_MOVETO_ABS (M), SVG_PATHSEG_LINETO_ABS (L), SVG_PATHSEG_CURVETO_CUBIC_ABS (C) and SVG_PATHSEG_CLOSEPATH (z). Thus, if the d attribute has an "absolute moveto (M)" and an "absolute arcto (A)" command, then pathSegList will have one SVG_PATHSEG_MOVETO_ABS entry followed by a series of SVG_PATHSEG_ARC_ABS entries which approximate the arc. This alternate representation is available to provide a simpler interface to developers who would benefit from a more limited set of commands.

    The various methods from SVGList, which are defined to accept parameters and return values of type Object, must receive parameters of type SVGPathSeg and return values of type SVGPathSeg, and the only valid SVGPathSeg types are SVG_PATHSEG_MOVETO_ABS (M), SVG_PATHSEG_LINETO_ABS (L), SVG_PATHSEG_CURVETO_CUBIC_ABS (C) and SVG_PATHSEG_CLOSEPATH (z).

Methods
  getTotalLength
    Returns the user agent's computed value for the total length of the path using the user agent's distance-along-a-path algorithm, as a distance in the current user coordinate system.
    No Parameters
    Return value

      float |  | The total length of the path.

    No Exceptions
  getPointAtLength
    Returns the (x,y) coordinate in user space which is `distance` units along the path, utilizing the user agent's distance-along-a-path algorithm.
    Parameters

      in float distance |  | The distance along the path, relative to the start of the path, as a distance in the current user coordinate system.

    Return value

      SVGPoint |  | The returned point in user space.

    Exceptions

      SVGException |  | SVG_WRONG_TYPE_ERR: Raised if the parameter is the wrong type of value.

  getPathSegAtLength
    Returns the index into pathSegList which is `distance` units along the path, utilizing the user agent's distance-along-a-path algorithm.
    Parameters

      in float distance |  | The distance along the path, relative to the start of the path, as a distance in the current user coordinate system.

    Return value

      unsigned long |  | The index of the path segment.

    Exceptions

      SVGException |  | SVG_WRONG_TYPE_ERR: Raised if the parameter is the wrong type of value.

  createSVGPathSeg
    Returns a stand-alone, parentless SVGPathSeg object which is initialized such that pathSegType is SVG_PATHSEG_UNKNOWN, pathSegTypeAsLetter is the empty string, and all other values are set to zero or (for the booleans) false. Before such an SVGPathSeg object can be inserted into one of an SVGPathElement's list of path commands, one of the attributes pathSegType or pathSegTypeAsLetter must be initialized to an appropriate value and the other attribute must have correct value settings.
    No Parameters
    Return value

      SVGPathSeg |  | An SVGPathSeg with a pathSegType of SVG_PATHSEG_UNKNOWN.

    No Exceptions

### Interface SVGPathSeg

The SVGPathSeg interface corresponds to a single command within a path data specification.

IDL Definition

      interface SVGPathSeg {
        // Path Segment Types
        constant unsigned short SVG_PATHSEG_UNKNOWN                      = 0;
        constant unsigned short SVG_PATHSEG_CLOSEPATH                    = 1;
        constant unsigned short SVG_PATHSEG_MOVETO_ABS                   = 2;
        constant unsigned short SVG_PATHSEG_MOVETO_REL                   = 3;
        constant unsigned short SVG_PATHSEG_LINETO_ABS                   = 4;
        constant unsigned short SVG_PATHSEG_LINETO_REL                   = 5;
        constant unsigned short SVG_PATHSEG_CURVETO_CUBIC_ABS            = 6;
        constant unsigned short SVG_PATHSEG_CURVETO_CUBIC_REL            = 7;
        constant unsigned short SVG_PATHSEG_CURVETO_QUADRATIC_ABS        = 8;
        constant unsigned short SVG_PATHSEG_CURVETO_QUADRATIC_REL        = 9;
        constant unsigned short SVG_PATHSEG_ARC_ABS                      = 10;
        constant unsigned short SVG_PATHSEG_ARC_REL                      = 11;
        constant unsigned short SVG_PATHSEG_LINETO_HORIZONTAL_ABS        = 12;
        constant unsigned short SVG_PATHSEG_LINETO_HORIZONTAL_REL        = 13;
        constant unsigned short SVG_PATHSEG_LINETO_VERTICAL_ABS          = 14;
        constant unsigned short SVG_PATHSEG_LINETO_VERTICAL_REL          = 15;
        constant unsigned short SVG_PATHSEG_CURVETO_CUBIC_SMOOTH_ABS     = 16;
        constant unsigned short SVG_PATHSEG_CURVETO_CUBIC_SMOOTH_REL     = 17;
        constant unsigned short SVG_PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS = 18;
        constant unsigned short SVG_PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL = 19;

                 attribute unsigned short pathSegType;
                 attribute DOMString      pathSegTypeAsLetter;
                 attribute float   x;
                 attribute float   y;
                 attribute float   x1;
                 attribute float   y1;
                 attribute float   x2;
                 attribute float   y2;
                 attribute float   r1;
                 attribute float   r2;
                 attribute float   angle;
                 attribute boolean largeArcFlag;
                 attribute boolean sweepFlag;
      };

Definition group Path Segment Types
  Defined constants

    SVG_PATHSEG_UNKNOWN |  | The unit type is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.
    SVG_PATHSEG_CLOSEPATH |  | Corresponds to a "closepath" (z) path data command.
    SVG_PATHSEG_MOVETO_ABS |  | Corresponds to an "absolute moveto" (M) path data command.
    SVG_PATHSEG_MOVETO_REL |  | Corresponds to a "relative moveto" (m) path data command.
    SVG_PATHSEG_LINETO_ABS |  | Corresponds to an "absolute lineto" (L) path data command.
    SVG_PATHSEG_LINETO_REL |  | Corresponds to a "relative lineto" (l) path data command.
    SVG_PATHSEG_CURVETO_CUBIC_ABS |  | Corresponds to an "absolute cubic bezier curveto" (C) path data command.
    SVG_PATHSEG_CURVETO_CUBIC_REL |  | Corresponds to a "relative cubic bezier curveto" (c) path data command.
    SVG_PATHSEG_CURVETO_QUADRATIC_ABS |  | Corresponds to an "absolute quadratic bezier curveto" (Q) path data command.
    SVG_PATHSEG_CURVETO_QUADRATIC_REL |  | Corresponds to a "relative quadratic bezier curveto" (q) path data command.
    SVG_PATHSEG_ARC_ABS |  | Corresponds to an "absolute arcto" (A) path data command.
    SVG_PATHSEG_ARC_REL |  | Corresponds to a "relative arcto" (a) path data command.
    SVG_PATHSEG_LINETO_HORIZONTAL_ABS |  | Corresponds to an "absolute horizontal lineto" (H) path data command.
    SVG_PATHSEG_LINETO_HORIZONTAL_REL |  | Corresponds to a "relative horizontal lineto" (h) path data command.
    SVG_PATHSEG_LINETO_VERTICAL_ABS |  | Corresponds to an "absolute vertical lineto" (V) path data command.
    SVG_PATHSEG_LINETO_VERTICAL_REL |  | Corresponds to a "relative vertical lineto" (v) path data command.
    SVG_PATHSEG_CURVETO_CUBIC_SMOOTH_ABS |  | Corresponds to an "absolute smooth cubic curveto" (S) path data command.
    SVG_PATHSEG_CURVETO_CUBIC_SMOOTH_REL |  | Corresponds to a "relative smooth cubic curveto" (s) path data command.
    SVG_PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS |  | Corresponds to an "absolute smooth quadratic curveto" (T) path data command.
    SVG_PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL |  | Corresponds to a "relative smooth quadratic curveto" (t) path data command.

Attributes
  unsigned short pathSegType
    The type of the path segment as specified by one of the constants specified above. Setting pathSegType will automatically cause pathSegTypeAsLetter to be updated with the corresponding one character path data command name.
  DOMString pathSegTypeAsLetter
    The type of the path segment, specified by the corresponding one character command name. Setting pathSegTypeAsLetter will automatically cause pathSegType to be updated with the corresponding integer constant.
  float x
    The X coordinate for the end point of this path segment.
  float y
    The Y coordinate for the end point of this path segment.
  float x1
    For a cubic bezier curve segment, the X coordinate for the first control point. For a quadratic bezier curve segment, the X coordinate for the control point. For all other path segment types, it will be set to the X coordinate for the start point for the path segment.
  float y1
    For a cubic bezier curve segment, the Y coordinate for the first control point. For a quadratic bezier curve segment, the Y coordinate for the control point. For all other path segment types, it will be set to the Y coordinate for the start point for the path segment.
  float x2
    For a cubic bezier curve segment, the X coordinate for the second control point. For all other path segment types, it will be set to the X coordinate for the end point for the path segment.
  float y2
    For a cubic bezier curve segment, the Y coordinate for the second control point. For all other path segment types, it will be set to the Y coordinate for the end point for the path segment.
  float r1
    For an arc segment, the X axis radius for the ellipse (i.e., r1). For all other path segment types, it will be set to zero.
  float r2
    For an arc segment, the Y axis radius for the ellipse (i.e., r2). For all other path segment types, it will be set to zero.
  float angle
    For an arc segment, the rotation angle in degrees for the ellipse's X-axis relative to the X-axis of the user coordinate system. For all other path segment types, it will be set to zero.
  boolean largeArcFlag
    For an arc segment, the value of the large-arc-flag parameter. For all other path segment types, it will be set to false.
  boolean sweepFlag
    For an arc segment, the value of the sweep-flag parameter. For all other path segment types, it will be set to false.

previous next contents properties index