Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from http://www.w3.org/TR/SVG11/paths.html below:

Paths – SVG 1.1 (Second Edition)

• 8.1 Introduction
• 8.2 The ‘path’ element
• 8.3 Path data
  • 8.3.1 General information about path data
  • 8.3.2 The "moveto" commands
  • 8.3.3 The "closepath" command
  • 8.3.4 The "lineto" commands
  • 8.3.5 The curve commands
  • 8.3.6 The cubic Bézier curve commands
  • 8.3.7 The quadratic Bézier curve commands
  • 8.3.8 The elliptical arc curve commands
  • 8.3.9 The grammar for path data
• 8.4 Distance along a path
• 8.5 DOM interfaces
  • 8.5.1 Interface SVGPathSeg
  • 8.5.2 Interface SVGPathSegClosePath
  • 8.5.3 Interface SVGPathSegMovetoAbs
  • 8.5.4 Interface SVGPathSegMovetoRel
  • 8.5.5 Interface SVGPathSegLinetoAbs
  • 8.5.6 Interface SVGPathSegLinetoRel
  • 8.5.7 Interface SVGPathSegCurvetoCubicAbs
  • 8.5.8 Interface SVGPathSegCurvetoCubicRel
  • 8.5.9 Interface SVGPathSegCurvetoQuadraticAbs
  • 8.5.10 Interface SVGPathSegCurvetoQuadraticRel
  • 8.5.11 Interface SVGPathSegArcAbs
  • 8.5.12 Interface SVGPathSegArcRel
  • 8.5.13 Interface SVGPathSegLinetoHorizontalAbs
  • 8.5.14 Interface SVGPathSegLinetoHorizontalRel
  • 8.5.15 Interface SVGPathSegLinetoVerticalAbs
  • 8.5.16 Interface SVGPathSegLinetoVerticalRel
  • 8.5.17 Interface SVGPathSegCurvetoCubicSmoothAbs
  • 8.5.18 Interface SVGPathSegCurvetoCubicSmoothRel
  • 8.5.19 Interface SVGPathSegCurvetoQuadraticSmoothAbs
  • 8.5.20 Interface SVGPathSegCurvetoQuadraticSmoothRel
  • 8.5.21 Interface SVGPathSegList
  • 8.5.22 Interface SVGAnimatedPathData
  • 8.5.23 Interface SVGPathElement

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

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 the geometry of the outline of an object, defined in terms of moveto (set a new current point), lineto (draw a straight line), curveto (draw a curve using a cubic Bézier), 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 multiple subpaths) are possible to allow effects such as "donut holes" in objects.

This chapter describes the syntax, behavior and DOM interfaces for SVG paths. Various implementation notes for SVG paths can be found in ‘path’ element implementation notes and Elliptical arc implementation notes.

A path is defined in SVG using the ‘path’ element.

‘path’

Categories:

Graphics element, shape element

Content model:

Any number of the following elements, in any order:

• animation elements — ‘animate’, ‘animateColor’, ‘animateMotion’, ‘animateTransform’, ‘set’
• descriptive elements — ‘desc’, ‘metadata’, ‘title’

Attributes:

• conditional processing attributes — ‘requiredFeatures’, ‘requiredExtensions’, ‘systemLanguage’
• core attributes — ‘id’, ‘xml:base’, ‘xml:lang’, ‘xml:space’
• graphical event attributes — ‘onfocusin’, ‘onfocusout’, ‘onactivate’, ‘onclick’, ‘onmousedown’, ‘onmouseup’, ‘onmouseover’, ‘onmousemove’, ‘onmouseout’, ‘onload’
• presentation attributes — ‘alignment-baseline’, ‘baseline-shift’, ‘clip’, ‘clip-path’, ‘clip-rule’, ‘color’, ‘color-interpolation’, ‘color-interpolation-filters’, ‘color-profile’, ‘color-rendering’, ‘cursor’, ‘direction’, ‘display’, ‘dominant-baseline’, ‘enable-background’, ‘fill’, ‘fill-opacity’, ‘fill-rule’, ‘filter’, ‘flood-color’, ‘flood-opacity’, ‘font-family’, ‘font-size’, ‘font-size-adjust’, ‘font-stretch’, ‘font-style’, ‘font-variant’, ‘font-weight’, ‘glyph-orientation-horizontal’, ‘glyph-orientation-vertical’, ‘image-rendering’, ‘kerning’, ‘letter-spacing’, ‘lighting-color’, ‘marker-end’, ‘marker-mid’, ‘marker-start’, ‘mask’, ‘opacity’, ‘overflow’, ‘pointer-events’, ‘shape-rendering’, ‘stop-color’, ‘stop-opacity’, ‘stroke’, ‘stroke-dasharray’, ‘stroke-dashoffset’, ‘stroke-linecap’, ‘stroke-linejoin’, ‘stroke-miterlimit’, ‘stroke-opacity’, ‘stroke-width’, ‘text-anchor’, ‘text-decoration’, ‘text-rendering’, ‘unicode-bidi’, ‘visibility’, ‘word-spacing’, ‘writing-mode’
• ‘class’
• ‘style’
• ‘externalResourcesRequired’
• ‘transform’
• ‘d’
• ‘pathLength’

DOM Interfaces:

• SVGPathElement

Attribute definitions:

d = "path data"

The definition of the outline of a shape. See Path data.
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. Flags and booleans are interpolated as fractions between zero and one, with any non-zero value considered to be a value of one/true.

pathLength = "<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 ‘pathLength’ to the user agent's own computed value for total path length. ‘pathLength’ potentially affects calculations for text on a path, motion animation and various stroke operations.
A negative value is an error (see Error processing).
Animatable: yes.

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 Béziers), arc and closepath instructions.

Example triangle01 specifies a path in the shape of a triangle. (The M indicates a moveto, the Ls indicate linetos, and the z indicates a closepath).

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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>

View this example as SVG (SVG-enabled browsers only)

Path data 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 path data.

The syntax of path data is concise 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 (uppercase means absolute coordinates, lowercase 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 Unicode U+0046 FULL STOP (".") character (also referred to in Unicode as PERIOD, dot and decimal point) and no other delimiter characters are allowed [UNICODE]. (For example, the following is an invalid numeric value in a path data stream: "13,000.56". Instead, say: "13000.56".)

For the relative versions of the commands, all coordinate values are relative to the current point at the start of the command.

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.

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 (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 new subpath:

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

The various "lineto" commands draw straight lines from the current point to a new point:

These three groups of commands draw curves:

• Cubic Bézier commands (C, c, S and s). A cubic Bézier segment is defined by a start point, an end point, and two control points.
• Quadratic Bézier commands (Q, q, T and t). A quadratic Bézier 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 Bézier commands are as follows:

Example cubic01 shows some simple uses of cubic Bézier commands within a path. The example uses an internal CSS style sheet to assign styling properties. Note that the control point for the "S" command is computed automatically as the reflection of the control point for the previous "C" command relative to the start point of the "S" command.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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 class="Border" x="1" y="1" width="498" height="398" />

  <polyline class="Connect" points="100,200 100,100" />
  <polyline class="Connect" points="250,100 250,200" />
  <polyline class="Connect" points="250,200 250,300" />
  <polyline class="Connect" points="400,300 400,200" />
  <path class="SamplePath" d="M100,200 C100,100 250,100 250,200
                                       S400,300 400,200" />
  <circle class="EndPoint" cx="100" cy="200" r="10" />
  <circle class="EndPoint" cx="250" cy="200" r="10" />
  <circle class="EndPoint" cx="400" cy="200" r="10" />
  <circle class="CtlPoint" cx="100" cy="100" r="10" />
  <circle class="CtlPoint" cx="250" cy="100" r="10" />
  <circle class="CtlPoint" cx="400" cy="300" r="10" />
  <circle class="AutoCtlPoint" cx="250" cy="300" r="9" />
  <text class="Label" x="25" y="70">M100,200 C100,100 250,100 250,200</text>
  <text class="Label" x="325" y="350"
        style="text-anchor:middle">S400,300 400,200</text>
</svg>

View this example as SVG (SVG-enabled browsers only)

The following picture shows some how cubic Bézier curves change their shape depending on the position of the control points. The first five examples illustrate a single cubic Bézier path segment. The example at the lower right shows a "C" command followed by an "S" command.

View this example as SVG (SVG-enabled browsers only)
 

The quadratic Bézier commands are as follows:

Example quad01 shows some simple uses of quadratic Bézier commands within a path. Note that the control point for the "T" command is computed automatically as the reflection of the control point for the previous "Q" command relative to the start point of the "T" command.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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>

View this example as SVG (SVG-enabled browsers only)

The elliptical arc commands are as follows:

Example arcs01 shows some simple uses of arc commands within a path.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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>

View this example as SVG (SVG-enabled browsers only)

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.

• 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)).

The following illustrates the four combinations of large-arc-flag and sweep-flag and the four different arcs that will be drawn based on the values of these flags. For each case, the following path data command was used:

<path d="M 125,75 a100,50 0 ?,? 100,50"
      style="fill:none; stroke:red; stroke-width:6"/>

where "?,?" is replaced by "0,0" "0,1" "1,0" and "1,1" to generate the four possible cases.

View this example as SVG (SVG-enabled browsers only)

Refer to Elliptical arc implementation notes for detailed implementation notes for the path data elliptical arc commands.

The following notation is used in the Backus-Naur Form (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* moveto-drawto-command-groups? wsp*
moveto-drawto-command-groups:
    moveto-drawto-command-group
    | moveto-drawto-command-group wsp* moveto-drawto-command-groups
moveto-drawto-command-group:
    moveto wsp* drawto-commands?
drawto-commands:
    drawto-command
    | drawto-command wsp* drawto-commands
drawto-command:
    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".

Note that the BNF allows the path ‘d’ attribute to be empty. This is not an error, instead it disables rendering of the 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 ‘pathLength’ 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 ‘pathLength’ 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.

interface SVGPathSeg {

  // Path Segment Types
  const unsigned short PATHSEG_UNKNOWN = 0;
  const unsigned short PATHSEG_CLOSEPATH = 1;
  const unsigned short PATHSEG_MOVETO_ABS = 2;
  const unsigned short PATHSEG_MOVETO_REL = 3;
  const unsigned short PATHSEG_LINETO_ABS = 4;
  const unsigned short PATHSEG_LINETO_REL = 5;
  const unsigned short PATHSEG_CURVETO_CUBIC_ABS = 6;
  const unsigned short PATHSEG_CURVETO_CUBIC_REL = 7;
  const unsigned short PATHSEG_CURVETO_QUADRATIC_ABS = 8;
  const unsigned short PATHSEG_CURVETO_QUADRATIC_REL = 9;
  const unsigned short PATHSEG_ARC_ABS = 10;
  const unsigned short PATHSEG_ARC_REL = 11;
  const unsigned short PATHSEG_LINETO_HORIZONTAL_ABS = 12;
  const unsigned short PATHSEG_LINETO_HORIZONTAL_REL = 13;
  const unsigned short PATHSEG_LINETO_VERTICAL_ABS = 14;
  const unsigned short PATHSEG_LINETO_VERTICAL_REL = 15;
  const unsigned short PATHSEG_CURVETO_CUBIC_SMOOTH_ABS = 16;
  const unsigned short PATHSEG_CURVETO_CUBIC_SMOOTH_REL = 17;
  const unsigned short PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS = 18;
  const unsigned short PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL = 19;

  readonly attribute unsigned short pathSegType;
  readonly attribute DOMString pathSegTypeAsLetter;
};

PATHSEG_UNKNOWN (unsigned short)

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.

PATHSEG_CLOSEPATH (unsigned short)

Corresponds to a "closepath" (z) path data command.

PATHSEG_MOVETO_ABS (unsigned short)

Corresponds to a "absolute moveto" (M) path data command.

PATHSEG_MOVETO_REL (unsigned short)

Corresponds to a "relative moveto" (m) path data command.

PATHSEG_LINETO_ABS (unsigned short)

Corresponds to a "absolute lineto" (L) path data command.

PATHSEG_LINETO_REL (unsigned short)

Corresponds to a "relative lineto" (l) path data command.

PATHSEG_CURVETO_CUBIC_ABS (unsigned short)

Corresponds to a "absolute cubic Bézier curveto" (C) path data command.

PATHSEG_CURVETO_CUBIC_REL (unsigned short)

Corresponds to a "relative cubic Bézier curveto" (c) path data command.

PATHSEG_CURVETO_QUADRATIC_ABS (unsigned short)

Corresponds to a "absolute quadratic Bézier curveto" (Q) path data command.

PATHSEG_CURVETO_QUADRATIC_REL (unsigned short)

Corresponds to a "relative quadratic Bézier curveto" (q) path data command.

PATHSEG_ARC_ABS (unsigned short)

Corresponds to a "absolute arcto" (A) path data command.

PATHSEG_ARC_REL (unsigned short)

Corresponds to a "relative arcto" (a) path data command.

PATHSEG_LINETO_HORIZONTAL_ABS (unsigned short)

Corresponds to a "absolute horizontal lineto" (H) path data command.

PATHSEG_LINETO_HORIZONTAL_REL (unsigned short)

Corresponds to a "relative horizontal lineto" (h) path data command.

PATHSEG_LINETO_VERTICAL_ABS (unsigned short)

Corresponds to a "absolute vertical lineto" (V) path data command.

PATHSEG_LINETO_VERTICAL_REL (unsigned short)

Corresponds to a "relative vertical lineto" (v) path data command.

PATHSEG_CURVETO_CUBIC_SMOOTH_ABS (unsigned short)

Corresponds to a "absolute smooth cubic curveto" (S) path data command.

PATHSEG_CURVETO_CUBIC_SMOOTH_REL (unsigned short)

Corresponds to a "relative smooth cubic curveto" (s) path data command.

PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS (unsigned short)

Corresponds to a "absolute smooth quadratic curveto" (T) path data command.

PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL (unsigned short)

Corresponds to a "relative smooth quadratic curveto" (t) path data command.

pathSegType (readonly unsigned short)

The type of the path segment as specified by one of the constants defined on this interface.

pathSegTypeAsLetter (readonly DOMString)

The type of the path segment, specified by the corresponding one character command name.

interface SVGPathSegClosePath : SVGPathSeg {
};

interface SVGPathSegMovetoAbs : SVGPathSeg {
  attribute float x setraises(DOMException);
  attribute float y setraises(DOMException);
};

x (float)

The absolute X coordinate for the end point of this path segment.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

y (float)

The absolute Y coordinate for the end point of this path segment.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

interface SVGPathSegMovetoRel : SVGPathSeg {
  attribute float x setraises(DOMException);
  attribute float y setraises(DOMException);
};

x (float)

The relative X coordinate for the end point of this path segment.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

y (float)

The relative Y coordinate for the end point of this path segment.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

interface SVGPathSegLinetoAbs : SVGPathSeg {
  attribute float x setraises(DOMException);
  attribute float y setraises(DOMException);
};

x (float)

The absolute X coordinate for the end point of this path segment.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

y (float)

The absolute Y coordinate for the end point of this path segment.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

interface SVGPathSegLinetoRel : SVGPathSeg {
  attribute float x setraises(DOMException);
  attribute float y setraises(DOMException);
};

x (float)

The relative X coordinate for the end point of this path segment.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

y (float)

The relative Y coordinate for the end point of this path segment.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

interface SVGPathSegCurvetoCubicAbs : SVGPathSeg {
  attribute float x setraises(DOMException);
  attribute float y setraises(DOMException);
  attribute float x1 setraises(DOMException);
  attribute float y1 setraises(DOMException);
  attribute float x2 setraises(DOMException);
  attribute float y2 setraises(DOMException);
};

x (float)

The absolute X coordinate for the end point of this path segment.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

y (float)

The absolute Y coordinate for the end point of this path segment.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

x1 (float)

The absolute X coordinate for the first control point.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

y1 (float)

The absolute Y coordinate for the first control point.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

x2 (float)

The absolute X coordinate for the second control point.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

y2 (float)

The absolute Y coordinate for the second control point.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

interface SVGPathSegCurvetoCubicRel : SVGPathSeg {
  attribute float x setraises(DOMException);
  attribute float y setraises(DOMException);
  attribute float x1 setraises(DOMException);
  attribute float y1 setraises(DOMException);
  attribute float x2 setraises(DOMException);
  attribute float y2 setraises(DOMException);
};

x (float)

The relative X coordinate for the end point of this path segment.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

y (float)

The relative Y coordinate for the end point of this path segment.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

x1 (float)

The relative X coordinate for the first control point.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

y1 (float)

The relative Y coordinate for the first control point.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

x2 (float)

The relative X coordinate for the second control point.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

y2 (float)

The relative Y coordinate for the second control point.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

interface SVGPathSegCurvetoQuadraticAbs : SVGPathSeg {
  attribute float x setraises(DOMException);
  attribute float y setraises(DOMException);
  attribute float x1 setraises(DOMException);
  attribute float y1 setraises(DOMException);
};

x (float)

The absolute X coordinate for the end point of this path segment.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

y (float)

The absolute Y coordinate for the end point of this path segment.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

x1 (float)

The absolute X coordinate for the first control point.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

y1 (float)

The absolute Y coordinate for the first control point.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

interface SVGPathSegCurvetoQuadraticRel : SVGPathSeg {
  attribute float x setraises(DOMException);
  attribute float y setraises(DOMException);
  attribute float x1 setraises(DOMException);
  attribute float y1 setraises(DOMException);
};

x (float)

The relative X coordinate for the end point of this path segment.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

y (float)

The relative Y coordinate for the end point of this path segment.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

x1 (float)

The relative X coordinate for the first control point.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

y1 (float)

The relative Y coordinate for the first control point.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

interface SVGPathSegArcAbs : SVGPathSeg {
  attribute float x setraises(DOMException);
  attribute float y setraises(DOMException);
  attribute float r1 setraises(DOMException);
  attribute float r2 setraises(DOMException);
  attribute float angle setraises(DOMException);
  attribute boolean largeArcFlag setraises(DOMException);
  attribute boolean sweepFlag setraises(DOMException);
};

x (float)

The absolute X coordinate for the end point of this path segment.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

y (float)

The absolute Y coordinate for the end point of this path segment.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

r1 (float)

The x-axis radius for the ellipse (i.e., r1).

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

r2 (float)

The y-axis radius for the ellipse (i.e., r2).

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

angle (float)

The rotation angle in degrees for the ellipse's x-axis relative to the x-axis of the user coordinate system.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

largeArcFlag (boolean)

The value of the large-arc-flag parameter.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

sweepFlag (boolean)

The value of the sweep-flag parameter.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

interface SVGPathSegArcRel : SVGPathSeg {
  attribute float x setraises(DOMException);
  attribute float y setraises(DOMException);
  attribute float r1 setraises(DOMException);
  attribute float r2 setraises(DOMException);
  attribute float angle setraises(DOMException);
  attribute boolean largeArcFlag setraises(DOMException);
  attribute boolean sweepFlag setraises(DOMException);
};

x (float)

The relative X coordinate for the end point of this path segment.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

y (float)

The relative Y coordinate for the end point of this path segment.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

r1 (float)

The x-axis radius for the ellipse (i.e., r1).

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

r2 (float)

The y-axis radius for the ellipse (i.e., r2).

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

angle (float)

The rotation angle in degrees for the ellipse's x-axis relative to the x-axis of the user coordinate system.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

largeArcFlag (boolean)

The value of the large-arc-flag parameter.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

sweepFlag (boolean)

The value of the sweep-flag parameter.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

interface SVGPathSegLinetoHorizontalAbs : SVGPathSeg {
  attribute float x setraises(DOMException);
};

x (float)

The absolute X coordinate for the end point of this path segment.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

interface SVGPathSegLinetoHorizontalRel : SVGPathSeg {
  attribute float x setraises(DOMException);
};

x (float)

The relative X coordinate for the end point of this path segment.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

interface SVGPathSegLinetoVerticalAbs : SVGPathSeg {
  attribute float y setraises(DOMException);
};

y (float)

The absolute Y coordinate for the end point of this path segment.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

interface SVGPathSegLinetoVerticalRel : SVGPathSeg {
  attribute float y setraises(DOMException);
};

y (float)

The relative Y coordinate for the end point of this path segment.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

interface SVGPathSegCurvetoCubicSmoothAbs : SVGPathSeg {
  attribute float x setraises(DOMException);
  attribute float y setraises(DOMException);
  attribute float x2 setraises(DOMException);
  attribute float y2 setraises(DOMException);
};

x (float)

The absolute X coordinate for the end point of this path segment.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

y (float)

The absolute Y coordinate for the end point of this path segment.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

x2 (float)

The absolute X coordinate for the second control point.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

y2 (float)

The absolute Y coordinate for the second control point.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

interface SVGPathSegCurvetoCubicSmoothRel : SVGPathSeg {
  attribute float x setraises(DOMException);
  attribute float y setraises(DOMException);
  attribute float x2 setraises(DOMException);
  attribute float y2 setraises(DOMException);
};

x (float)

The relative X coordinate for the end point of this path segment.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

y (float)

The relative Y coordinate for the end point of this path segment.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

x2 (float)

The relative X coordinate for the second control point.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

y2 (float)

The relative Y coordinate for the second control point.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

interface SVGPathSegCurvetoQuadraticSmoothAbs : SVGPathSeg {
  attribute float x setraises(DOMException);
  attribute float y setraises(DOMException);
};

x (float)

The absolute X coordinate for the end point of this path segment.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

y (float)

The absolute Y coordinate for the end point of this path segment.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

interface SVGPathSegCurvetoQuadraticSmoothRel : SVGPathSeg {
  attribute float x setraises(DOMException);
  attribute float y setraises(DOMException);
};

x (float)

The relative X coordinate for the end point of this path segment.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

y (float)

The relative Y coordinate for the end point of this path segment.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

This interface defines a list of SVGPathSeg objects.

SVGPathSegList has the same attributes and methods as other SVGxxxList interfaces. Implementers may consider using a single base class to implement the various SVGxxxList interfaces.

interface SVGPathSegList {

  readonly attribute unsigned long numberOfItems;

  void clear() raises(DOMException);
  SVGPathSeg initialize(in SVGPathSeg newItem) raises(DOMException);
  SVGPathSeg getItem(in unsigned long index) raises(DOMException);
  SVGPathSeg insertItemBefore(in SVGPathSeg newItem, in unsigned long index) raises(DOMException);
  SVGPathSeg replaceItem(in SVGPathSeg newItem, in unsigned long index) raises(DOMException);
  SVGPathSeg removeItem(in unsigned long index) raises(DOMException);
  SVGPathSeg appendItem(in SVGPathSeg newItem) raises(DOMException);
};

numberOfItems (readonly unsigned long)

The number of items in the list.

void clear()

Clears all existing current items from the list, with the result being an empty list.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised when the list cannot be modified.

SVGPathSeg initialize(in SVGPathSeg newItem)

Clears all existing current items from the list and re-initializes the list to hold the single item specified by the parameter. If the inserted item is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy.

1. The item which should become the only member of the list.

The item being inserted into the list.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised when the list cannot be modified.

SVGPathSeg getItem(in unsigned long index)

Returns the specified item from the list. The returned item is the item itself and not a copy. Any changes made to the item are immediately reflected in the list.

1. unsigned long index

   The index of the item from the list which is to be returned. The first item is number 0.

The selected item.

DOMException, code INDEX_SIZE_ERR

Raised if the index number is greater than or equal to numberOfItems.

SVGPathSeg insertItemBefore(in SVGPathSeg newItem, in unsigned long index)

Inserts a new item into the list at the specified position. The first item is number 0. If newItem is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy. If the item is already in this list, note that the index of the item to insert before is before the removal of the item.

1. The item which is to be inserted into the list.

2. unsigned long index

   The index of the item before which the new item is to be inserted. The first item is number 0. If the index is equal to 0, then the new item is inserted at the front of the list. If the index is greater than or equal to

   numberOfItems

   , then the new item is appended to the end of the list.

The inserted item.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised when the list cannot be modified.

SVGPathSeg replaceItem(in SVGPathSeg newItem, in unsigned long index)

Replaces an existing item in the list with a new item. If newItem is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy. If the item is already in this list, note that the index of the item to replace is before the removal of the item.

1. The item which is to be inserted into the list.

2. unsigned long index

   The index of the item which is to be replaced. The first item is number 0.

The inserted item.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised when the list cannot be modified.

DOMException, code INDEX_SIZE_ERR

Raised if the index number is greater than or equal to numberOfItems.

SVGPathSeg removeItem(in unsigned long index)

Removes an existing item from the list.

1. unsigned long index

   The index of the item which is to be removed. The first item is number 0.

The removed item.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised when the list cannot be modified.

DOMException, code INDEX_SIZE_ERR

Raised if the index number is greater than or equal to numberOfItems.

SVGPathSeg appendItem(in SVGPathSeg newItem)

Inserts a new item at the end of the list. If newItem is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy.

1. The item which is to be inserted. The first item is number 0.

The inserted item.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised when the list cannot be modified.

The SVGAnimatedPathData interface supports elements which have a ‘d’ attribute which holds SVG path data, and supports the ability to animate that attribute.

The SVGAnimatedPathData interface provides two lists to access and modify the base (i.e., static) contents of the ‘d’ attribute:

• DOM attribute pathSegList provides access to the static/base 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 static/base 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).

and two lists to access the current animated values of the ‘d’ attribute:

• DOM attribute animatedPathSegList provides access to the current animated contents of the ‘d’ attribute in a form which matches one-for-one with SVG's syntax.
• DOM attribute animatedNormalizedPathSegList provides normalized access to the current animated 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).

Each of 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.

Additionally, the ‘d’ attribute on the ‘path’ element accessed via the XML DOM (e.g., using the getAttribute() method call) will reflect any changes made to pathSegList or normalizedPathSegList.

interface SVGAnimatedPathData {
  readonly attribute SVGPathSegList pathSegList;
  readonly attribute SVGPathSegList normalizedPathSegList;
  readonly attribute SVGPathSegList animatedPathSegList;
  readonly attribute SVGPathSegList animatedNormalizedPathSegList;
};

pathSegList (readonly SVGPathSegList)

Provides access to the base (i.e., static) 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.

normalizedPathSegList (readonly SVGPathSegList)

Provides access to the base (i.e., static) 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_LINETO_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 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).

animatedPathSegList (readonly SVGPathSegList)

Provides access to the current animated contents of the

‘d’

attribute in a form which matches one-for-one with SVG's syntax. If the given attribute or property is being animated, contains the current animated value of the attribute or property, and both the object itself and its contents are read only. If the given attribute or property is not currently being animated, contains the same value as

pathSegList

.

animatedNormalizedPathSegList (readonly SVGPathSegList)

Provides access to the current animated 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). If the given attribute or property is being animated, contains the current animated value of the attribute or property, and both the object itself and its contents are read only. If the given attribute or property is not currently being animated, contains the same value as

normalizedPathSegList

.

interface SVGPathElement : SVGElement,
                           SVGTests,
                           SVGLangSpace,
                           SVGExternalResourcesRequired,
                           SVGStylable,
                           SVGTransformable,
                           SVGAnimatedPathData {

  readonly attribute SVGAnimatedNumber pathLength;

  float getTotalLength();
  SVGPoint getPointAtLength(in float distance);
  unsigned long getPathSegAtLength(in float distance);
  SVGPathSegClosePath createSVGPathSegClosePath();
  SVGPathSegMovetoAbs createSVGPathSegMovetoAbs(in float x, in float y);
  SVGPathSegMovetoRel createSVGPathSegMovetoRel(in float x, in float y);
  SVGPathSegLinetoAbs createSVGPathSegLinetoAbs(in float x, in float y);
  SVGPathSegLinetoRel createSVGPathSegLinetoRel(in float x, in float y);
  SVGPathSegCurvetoCubicAbs createSVGPathSegCurvetoCubicAbs(in float x, in float y, in float x1, in float y1, in float x2, in float y2);
  SVGPathSegCurvetoCubicRel createSVGPathSegCurvetoCubicRel(in float x, in float y, in float x1, in float y1, in float x2, in float y2);
  SVGPathSegCurvetoQuadraticAbs createSVGPathSegCurvetoQuadraticAbs(in float x, in float y, in float x1, in float y1);
  SVGPathSegCurvetoQuadraticRel createSVGPathSegCurvetoQuadraticRel(in float x, in float y, in float x1, in float y1);
  SVGPathSegArcAbs createSVGPathSegArcAbs(in float x, in float y, in float r1, in float r2, in float angle, in boolean largeArcFlag, in boolean sweepFlag);
  SVGPathSegArcRel createSVGPathSegArcRel(in float x, in float y, in float r1, in float r2, in float angle, in boolean largeArcFlag, in boolean sweepFlag);
  SVGPathSegLinetoHorizontalAbs createSVGPathSegLinetoHorizontalAbs(in float x);
  SVGPathSegLinetoHorizontalRel createSVGPathSegLinetoHorizontalRel(in float x);
  SVGPathSegLinetoVerticalAbs createSVGPathSegLinetoVerticalAbs(in float y);
  SVGPathSegLinetoVerticalRel createSVGPathSegLinetoVerticalRel(in float y);
  SVGPathSegCurvetoCubicSmoothAbs createSVGPathSegCurvetoCubicSmoothAbs(in float x, in float y, in float x2, in float y2);
  SVGPathSegCurvetoCubicSmoothRel createSVGPathSegCurvetoCubicSmoothRel(in float x, in float y, in float x2, in float y2);
  SVGPathSegCurvetoQuadraticSmoothAbs createSVGPathSegCurvetoQuadraticSmoothAbs(in float x, in float y);
  SVGPathSegCurvetoQuadraticSmoothRel createSVGPathSegCurvetoQuadraticSmoothRel(in float x, in float y);
};

pathLength (readonly SVGAnimatedNumber)

float 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.

The total length of the path.

SVGPoint getPointAtLength(in float distance)

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.

1. float distance

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

The returned point in user space.

unsigned long getPathSegAtLength(in float distance)

Returns the index into

pathSegList

which is

distance

units along the path, utilizing the user agent's distance-along-a-path algorithm.

1. float distance

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

The index of the path segment, where the first path segment is number 0.

SVGPathSegClosePath createSVGPathSegClosePath()

SVGPathSegMovetoAbs createSVGPathSegMovetoAbs(in float x, in float y)

1. float x

   The absolute X coordinate for the end point of this path segment.

2. float y

   The absolute Y coordinate for the end point of this path segment.

SVGPathSegMovetoRel createSVGPathSegMovetoRel(in float x, in float y)

1. float x

   The relative X coordinate for the end point of this path segment.

2. float y

   The relative Y coordinate for the end point of this path segment.

SVGPathSegLinetoAbs createSVGPathSegLinetoAbs(in float x, in float y)

1. float x

   The absolute X coordinate for the end point of this path segment.

2. float y

   The absolute Y coordinate for the end point of this path segment.

SVGPathSegLinetoRel createSVGPathSegLinetoRel(in float x, in float y)

1. float x

   The relative X coordinate for the end point of this path segment.

2. float y

   The relative Y coordinate for the end point of this path segment.

SVGPathSegCurvetoCubicAbs createSVGPathSegCurvetoCubicAbs(in float x, in float y, in float x1, in float y1, in float x2, in float y2)

1. float x

   The absolute X coordinate for the end point of this path segment.

2. float y

   The absolute Y coordinate for the end point of this path segment.

3. float x1

   The absolute X coordinate for the first control point.

4. float y1

   The absolute Y coordinate for the first control point.

5. float x2

   The absolute X coordinate for the second control point.

6. float y2

   The absolute Y coordinate for the second control point.

SVGPathSegCurvetoCubicRel createSVGPathSegCurvetoCubicRel(in float x, in float y, in float x1, in float y1, in float x2, in float y2)

1. float x

   The relative X coordinate for the end point of this path segment.

2. float y

   The relative Y coordinate for the end point of this path segment.

3. float x1

   The relative X coordinate for the first control point.

4. float y1

   The relative Y coordinate for the first control point.

5. float x2

   The relative X coordinate for the second control point.

6. float y2

   The relative Y coordinate for the second control point.

SVGPathSegCurvetoQuadraticAbs createSVGPathSegCurvetoQuadraticAbs(in float x, in float y, in float x1, in float y1)

1. float x

   The absolute X coordinate for the end point of this path segment.

2. float y

   The absolute Y coordinate for the end point of this path segment.

3. float x1

   The absolute X coordinate for the first control point.

4. float y1

   The absolute Y coordinate for the first control point.

SVGPathSegCurvetoQuadraticRel createSVGPathSegCurvetoQuadraticRel(in float x, in float y, in float x1, in float y1)

1. float x

   The relative X coordinate for the end point of this path segment.

2. float y

   The relative Y coordinate for the end point of this path segment.

3. float x1

   The relative X coordinate for the first control point.

4. float y1

   The relative Y coordinate for the first control point.

SVGPathSegArcAbs createSVGPathSegArcAbs(in float x, in float y, in float r1, in float r2, in float angle, in boolean largeArcFlag, in boolean sweepFlag)

1. float x

   The absolute X coordinate for the end point of this path segment.

2. float y

   The absolute Y coordinate for the end point of this path segment.

3. float r1

   The x-axis radius for the ellipse (i.e., r1).

4. float r2

   The y-axis radius for the ellipse (i.e., r2).

5. float angle

   The rotation angle in degrees for the ellipse's x-axis relative to the x-axis of the user coordinate system.

6. boolean largeArcFlag

   The value of the large-arc-flag parameter.

7. boolean sweepFlag

   The value of the large-arc-flag parameter.

SVGPathSegArcRel createSVGPathSegArcRel(in float x, in float y, in float r1, in float r2, in float angle, in boolean largeArcFlag, in boolean sweepFlag)

1. float x

   The relative X coordinate for the end point of this path segment.

2. float y

   The relative Y coordinate for the end point of this path segment.

3. float r1

   The x-axis radius for the ellipse (i.e., r1).

4. float r2

   The y-axis radius for the ellipse (i.e., r2).

5. float angle

   The rotation angle in degrees for the ellipse's x-axis relative to the x-axis of the user coordinate system.

6. boolean largeArcFlag

   The value of the large-arc-flag parameter.

7. boolean sweepFlag

   The value of the large-arc-flag parameter.

SVGPathSegLinetoHorizontalAbs createSVGPathSegLinetoHorizontalAbs(in float x)

1. float x

   The absolute X coordinate for the end point of this path segment.

SVGPathSegLinetoHorizontalRel createSVGPathSegLinetoHorizontalRel(in float x)

1. float x

   The relative X coordinate for the end point of this path segment.

SVGPathSegLinetoVerticalAbs createSVGPathSegLinetoVerticalAbs(in float y)

1. float y

   The absolute Y coordinate for the end point of this path segment.

SVGPathSegLinetoVerticalRel createSVGPathSegLinetoVerticalRel(in float y)

1. float y

   The relative Y coordinate for the end point of this path segment.

SVGPathSegCurvetoCubicSmoothAbs createSVGPathSegCurvetoCubicSmoothAbs(in float x, in float y, in float x2, in float y2)

1. float x

   The absolute X coordinate for the end point of this path segment.

2. float y

   The absolute Y coordinate for the end point of this path segment.

3. float x2

   The absolute X coordinate for the second control point.

4. float y2

   The absolute Y coordinate for the second control point.

SVGPathSegCurvetoCubicSmoothRel createSVGPathSegCurvetoCubicSmoothRel(in float x, in float y, in float x2, in float y2)

1. float x

   The relative X coordinate for the end point of this path segment.

2. float y

   The relative Y coordinate for the end point of this path segment.

3. float x2

   The relative X coordinate for the second control point.

4. float y2

   The relative Y coordinate for the second control point.

SVGPathSegCurvetoQuadraticSmoothAbs createSVGPathSegCurvetoQuadraticSmoothAbs(in float x, in float y)

1. float x

   The absolute X coordinate for the end point of this path segment.

2. float y

   The absolute Y coordinate for the end point of this path segment.

SVGPathSegCurvetoQuadraticSmoothRel createSVGPathSegCurvetoQuadraticSmoothRel(in float x, in float y)

1. float x

   The relative X coordinate for the end point of this path segment.

2. float y

   The relative Y coordinate for the end point of this path segment.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4