精图规范1.0----8 路径 Paths

previous next   contents   elements   attributes   properties   index  

---

04 September 2001

8 路径 Paths

内容 Contents

• 8.1 引言 Introduction
• 8.2 'path' 元素 The 'path' element
• 8.3 路径数据 Path Data
  • 8.3.1 关于路径数据的一般信息 General information about path data
  • 8.3.2 "moveto"命令 The "moveto" commands
  • 8.3.3 "closepath"命令 The "closepath" command
  • 8.3.4 "lineto"命令 The "lineto" commands
  • 8.3.5 曲线命令 The curve commands
  • 8.3.6 三次Bézier曲线命令 The cubic Bézier curve commands
  • 8.3.7 二次Bézier 曲线命令 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.1 引言 Introduction

路径表示一个形状的轮廓线此形状可以填充, 描边, 用作剪切路径, 或者这三者的组合. (参见 填充, 描边和绘制服务器 及 剪切, 蒙版和合成.)   Paths represent the outline of a shape which can be filled, stroked, used as aclipping path, or any combination of the three. (SeeFilling, Stroking and PaintServers and Clipping,Masking and Compositing.)

一个路径使用当前点的概念进行描述. 拿在纸上绘图进行类比, 当前点可以认为是笔的位置. 笔的位置可以改变, 并且形状的轮廓线(开的或闭的) 可以由通过拖拽笔在要么直线要么曲线上移动形成的痕迹构成.   A path is described using the concept of a current point. In an analogy withdrawing on paper, the current point can be thought of as the location of thepen. The position of the pen can be changed, and the outline of a shape (openor closed) can be traced by dragging the pen in either straight lines orcurves.

路径表示一个对象轮廓线的几何,按照 moveto (设置新的当前点), lineto(画一条直线), curveto(画一条三次Bézier曲线 ),arc (画一条椭圆弧或圆弧) 和closepath (通过画一条直线到最后的moveto而闭合当前形状) 这些基本命令来定义. 复合路径 (即, 具有多条子路径的路径) 可以 在对象中允许形成比如 "圆环洞"的效果.   Paths represent the geometry of the outline of an object, defined in terms ofmoveto(set a new current point),lineto (draw a straight line),curveto(draw a curve using a cubic Bézier),arc (elliptical or circular arc)andclosepath (close the current shape by drawing a line to the lastmoveto)elements. Compound paths (i.e., a path with multiple subpaths) are possible toallow effects such as "donut holes" in objects.

本章描述精图路径的语法, 行为和文档对象模型接口. 关于精图路径的各种各样实现的注记可以在'path' 元素实现注记 和椭圆弧实现注记中找到.   This chapterdescribes the syntax, behavior and DOM interfaces for SVG paths. Variousimplementation notes for SVG paths can be found in'path' element implementation notes and Ellipticalarc implementation notes.

在精图中使用 'path' 元素来定义路径.    A path isdefined in SVG using the 'path'element. 

8.2 'path' 元素  The 'path' element

 

<!ENTITY % pathExt "" >

<!ELEMENT path (%descTitleMetadata;,(animate|set|animateMotion|animateColor|animateTransform

                %geExt;%pathExt;)*) >

<!ATTLIST path

  %stdAttrs;

  %testAttrs;

  %langSpaceAttrs;

  externalResourcesRequired %Boolean; #IMPLIED

  class %ClassList; #IMPLIED

  style %StyleSheet; #IMPLIED

  %PresentationAttributes-Color;

  %PresentationAttributes-FillStroke;

  %PresentationAttributes-Graphics;

  %PresentationAttributes-Markers;

  transform %TransformList; #IMPLIED

  %graphicsElementEvents;

  d %PathData; #REQUIRED

  pathLength %Number; #IMPLIED >

性质定义: Attributedefinitions:

d = "path data"

形状的轮廓线定义. 参见 路径数据.  The definition of the outline of a shape. See Path data.
Animatable:yes.  

路径数据动画只有当在一个动画说明中的每个路径数据说明与d 性质中的路径数据命令的列表相同才是可能的. 如果被指定的一个动画和路径数据命令列表不相同, 那么此动画说明是一种错误 (参见错误处理).动画引擎根据给定动画元素的性质分别对每个路径数据命令的每个参数进行插补. 标记和布尔值作为零和一之间的分数进行插补, 任何非零值看作为一/真.      Path data animation is only possible when each path data specification withinan animation specification has exactly the same list of path data commands asthe d attribute. If an animation is specified andthe list of path data commands is not the same, then the animationspecification is in error (seeErrorProcessing). The animation engine interpolates each parameter to each pathdata command separately based on the attributes to the given animation element.Flags and booleans are interpolated as fractions between zero and one, with anynon-zero value considered to be a value of one/true.

pathLength = "<number>"

作者计算的路径的全长, 以用户单位为单位. 这个值用于校准用户代理本身的 沿着一条路径的距离的计算. 用户代理将按照pathLength比用户代理本身对路径的全长的计算值的比率缩放所有沿着一条路径的距离的计算值. pathLength 潜在地影响关于路径上的文本,运动动画和各种各样的描边操作的计算 .    The author'scomputation of the total length of the path, in user units. This value is usedto calibrate the user agent's owndistance-along-a-pathcalculations with that of the author. The user agent will scale alldistance-along-a-path computations by the ratio of pathLengthto the user agent's own computed value for total path length. pathLength potentially affects calculations fortext on a path, motionanimation and various strokeoperations.
负数是一种错误 (参见 错误处理). A negative value is an error (see Errorprocessing).
Animatable:yes.

 

在别处定义的性质: Attributesdefined elsewhere:

%stdAttrs;,%langSpaceAttrs;,class,transform,%graphicsElementEvents;,%testAttrs;,externalResourcesRequired,style,%PresentationAttributes-Color;%PresentationAttributes-FillStroke;%PresentationAttributes-Graphics;%PresentationAttributes-Markers;.

8.3 路径数据 Path data

8.3.1 关于路径数据的一般信息 General informationabout path data

一条路径通过包含 'path' 元素来定义此元素具有 d="(pathdata)" 性质, 这里d 性质包含moveto, line, curve (包括三次和二次 Béziers曲线),arc 和closepath 命令.   A path is defined byincluding a 'path' element which contains ad="(pathdata)" attribute, where thed attribute containsthemoveto, line, curve (both cubic and quadraticBéziers),arc andclosepath instructions.

例子 triangle01 指定一个形状为三角形的路径. ( M 表示 moveto,  L 表示lineto's, 而 z 表示 closepath).   Example triangle01specifies a path in the shape of a triangle. (TheM indicatesamoveto, the L's indicate lineto's, and thez indicates aclosepath).

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 

  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="4cm" height="4cm" viewBox="0 0 400 400"

     xmlns="http://www.w3.org/2000/svg">

  <title>Example triangle01- simple example of a 'path'</title>

  <desc>A path that draws a triangle</desc>

  <rect x="1" y="1" width="398" height="398"

        fill="none" stroke="blue" />

  <path d="M 100 100 L 300 100 L 200 300 z"

        fill="red" stroke="blue" stroke-width="3" />

</svg>

Example triangle01

View thisexample as SVG (SVG-enabled browsers only)
 

路径数据可以包含换行字符从而可以用多行表示以便改善可读性. 因为某些相关的工具对每行的长度有限制, 建议精图生成器将长的路径数据字符串分成多行, 使得每一行不超过255个字符. 同时注意新行字符只允许插入路径数据某些特定位置.    Path data can contain newline characters andthus can be broken up into multiple lines to improve readability. Because ofline length limitations with certain related tools, it is recommended that SVGgenerators split long path data strings across multiple lines, with each linenot exceeding 255 characters. Also note that newline characters are onlyallowed at certain places within path data.

路径数据的语法是简明的目的在于减少文件尺寸和进行有效率的下载, 因为很多精图文件的大部分内容为路径数据. 精图试图减少路径数据的一些途径如下:   The syntax of path data is concise in order to allowfor minimal file size and efficient downloads, since many SVG files will bedominated by their path data. Some of the ways that SVG attempts to minimizethe size of path data are as follows:

• 所有命令用一个字符表示 (例如,  moveto 表示为 M).   All instructions are expressed as one character (e.g., amoveto is expressed as anM).
• 多余的空白符和分隔符比如逗号可以省去(例如, "M 100 100 L 200 200" 包含不必要的空格可以表示为更紧密的形式"M100 100L200 200").   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").
• 如果在一行使用多个相同的命令那么在后来的命令的字符可以省去 (例如, 你可以删掉在 "M 100 200 L 200 100 L -100 -200" 中的第二个 "L" 并用 "M 100 200 L 200 100 -100 -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).
• 可以使用lineto在水平线和垂直线(绝对和相对)这种特殊情况下的优化的替换形式.   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.

路径数据的语法为一种前缀记法(即, 参数跟在命令的后面). 唯一可使用的十进制小数点为一个统一字符 [UNICODE]FULL STOP (".") 字符 (也参考 在Unicode中 作为 PERIOD, dot 和 小数点???) 并且不允许使用其它分隔符.(例如, 后面是 一个在路径数据流中无效的数字的值: "13,000.56". 而应该记作: "13000.56".)    The path data syntax is aprefix notation (i.e., commands followed by parameters). The only allowabledecimal point is a Unicode [UNICODE] FULL STOP(".") character (also referred to in Unicode as PERIOD, dot anddecimal point) and no other delimiter characters are allowed. (For example, thefollowing 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 relativeto the current point at the start of the command.

在下面的表格中使用下列记号: In the tables below, the following notation is used:

• (): 一组参数    (): grouping of parameters
• +: 要求1个或更多的参数    +: 1 or more of the given parameter(s) is required

下列章节列出这些命令. The following sections list the commands.

8.3.2"moveto"命令  The"moveto"commands

 "moveto" 命令 (M 或 m) 建立一个新的当前点. 其效果相当于 "笔"被抬起并移到一个新的位置 . 一个路径数据段必须以一条"moveto" 命令开始 . 以后的"moveto"命令 (即, 当此"moveto" 不是第一条命令时) 表示一条新的子路径的开始:   The "moveto" commands (M orm)establish a new current point. The effect is as if the "pen" werelifted and moved to a new location. A path data segment must begin with a"moveto" command. Subsequent "moveto" commands (i.e., whenthe "moveto" is not the first command) represent the start of a newsubpath:

命令Command

名字Name

参数Parameters

描述 Description

M (absolute)
m (relative)

moveto

(x y)+

在给定的坐标(x,y)处开始一条新的子路径. M (大写) 表示将跟随绝对坐标; m (小写) 表示将跟随相对坐标. 如果一条相对 moveto (m) 作为路径的第一个元素出现, 那么将它看成时绝对坐标偶. 如果moveto 后跟着多对坐标, 那么随后的坐标偶按照隐含的 lineto 命令对待.     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"closepath"命令The "closepath"command

"closepath" (Z 或 z) 结束当前的子路径并自动产生一条从当前点画到当前子路径的起始点的直线. 如果"closepath" 后面马上跟着一个 "moveto", 那么 "moveto" 确定下一个子路径的起始点. 如果"closepath" 后面立即跟着任何其它的命令, 那么下一个子路径将当前子路径的起点作为其起点.     The "closepath" (Zorz) ends the current subpath and causes an automaticstraight line to be drawn from the current point to the initial point of thecurrent subpath. If a "closepath" is followed immediately by a"moveto", then the "moveto" identifies the start point ofthe next subpath. If a "closepath" is followed immediately by anyother command, then the next subpath starts at the same initial point as thecurrent subpath.

当一个子路径以一个"closepath"结束时, 它与经过一个"lineto" 命令"手工"来关闭子路径在任何实现'stroke-linejoin'和'stroke-linecap'上的行为有所不同. 用 "closepath", 子路径最后段的终止点与子路径的初始段的起始点使用'stroke-linejoin'的当前值进行"连接" . 如果你通过使用 "lineto" 命令 "手工" 关闭此子路径, 第一段的起始点与最后一段的终止点并不进行连接而是各自使用'stroke-linecap'的当前值进行端点处理. 此命令结束后, 新的当前点设置为当前子路径的起始点.    When a subpath ends in a "closepath," it differs in behavior fromwhat 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 ofthe subpath is "joined" with the start of the initial segment of thesubpath 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 notjoined 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 ofthe current subpath.

命令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 initial point.

8.3.4"lineto"命令 The "lineto" commands

各种"lineto"命令从当前点到新的点画一条直线:   The various "lineto" commands draw straight lines from the current pointto a new point:

命令Command

名字Name

参数Parameters

描述 Description

L (absolute)
l (relative)

lineto

(x y)+

从当前点画一条直线到给定的点其坐标 为(x,y) 此点变成新的当前点. L (大写) 表示跟随的是绝对坐标; l (小写) 表示跟随的是相对坐标. 可以通过指定一系列坐标偶来绘制折线. 在此命令结束时, 新的当前点设置为所提供的最后一对坐标.    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+

从当前点(cpx, cpy)到(x, cpy)画一条水平线. H (大写) 表示跟随的是绝对坐标; h (小写) 表示跟随的是相对坐标. 可以提供多个 x 值 (虽然通常这样并无意义). 在此命令结束时,  新的当前点变成 (x, cpy) 这里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+

从当前点(cpx, cpy)到(cpx, y)画一条垂直线. V (大写) 表示跟随的是绝对坐标; v (小写) 表示跟随的是相对坐标. 可以提供多个 y 值 (虽然通常这样并无意义). 在此命令结束时,  新的当前点变成 (cpx, y) 这里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 curvecommands

有三组绘制曲线的命令:   These three groups of commands draw curves:

• 三次 Bézier 曲线命令 (C,c,S 和 s). 一个三次 Bézier 曲线段由一个起始点, 一个终止点, 和两个控制点来定义.    Cubic Bézier commands (C,c, S ands). A cubic Bézier segment is defined by a start point, an end point, and two control points.
• 二次 Bézier 曲线命令 (Q,q,T 和 t). 一个二次 Bézier 曲线段由一个起始点, 一个终止点, 和一个控制点来定义.     Quadratic Bézier commands (Q, q, T andt). A quadratic Bézier segment is defined by a start point, an end point, and one control point.
• 椭圆弧命令 (A 和a). 一个椭圆弧画椭圆的一段.   Elliptical arc commands (A and a). An elliptical arc segment draws a segment of an ellipse.

8.3.6 三次Bézier曲线命令  The cubic Bézier curvecommands

三次Bézier曲线命令如下:   The cubic Béziercommands are as follows:

命令Command

名字Name

参数Parameters

描述 Description

C (absolute)
c (relative)

curveto

(x1 y1 x2 y2 x y)+

 从当前点到(x,y) 利用(x1,y1)作为曲线的起始控制点(x2,y2)作为曲线的终止控制点绘制三次 Bézier 曲线. C (大写) 表示跟随的是绝对坐标;c (小写) 表示跟随的是相对坐标. 可以通过指定一系列坐标偶来绘制Bézier 曲线串. 在此命令结束时, 新的当前点设置为Bézier 曲线串所提供的最后一对坐标(x,y).     Draws a cubic Bézier curve from the current point to (x,y) using (x1,y1) as the control point at the beginning of the curve and (x2,y2) as the control point at the end of the curve.C (uppercase) indicates that absolute coordinates will follow;c (lowercase) indicates that relative coordinates will follow. Multiple sets of coordinates may be specified to draw a polybézier. At the end of the command, the new current point becomes the final (x,y) coordinate pair used in the polybézier.

S (absolute)
s (relative)

shorthand/smooth curveto

(x2 y2 x y)+

从当前点到(x,y)绘制三次 Bézier 曲线. 第一个控制点被假设为在前一命令的第二个控制点相对于当前点的反射. (如果不存在以前的命令或者以前的命令不是C, c, S 或 s, 则假设第一个控制点为当前点.) (x2,y2) 是第二个控制点 (即, 曲线的终止控制点).S (大写) 表示跟随的是绝对坐标;s (小写) 表示跟随的是相对坐标. 可以通过指定一系列坐标偶来绘制 Bézier 曲线串. 在此命令结束时, 新的当前点设置为 Bézier 曲线串所提供的最后一对坐标(x,y).         Draws a cubic Bézier curve from the current point to (x,y). The first control point is assumed to be the reflection of the second control point on the previous command relative to the current point. (If there is no previous command or if the previous command was not an C, c, S or s, assume the first control point is coincident with the current point.) (x2,y2) is the second control point (i.e., the control point at the end of the curve). S (uppercase) indicates that absolute coordinates will follow;s (lowercase) indicates that relative coordinates will follow. Multiple sets of coordinates may be specified to draw a polybézier. At the end of the command, the new current point becomes the final (x,y) coordinate pair used in the polybézier.

例子 cubic01 显示在一条路径中三次 Bézier曲线命令的某些简单使用. 例子使用内部的CSS样式表来指派样式属性. 注意"S"命令的控制点是通过自动计算以前"C"命令的控制点相对于此"S"命令的起始点的反射而得到的.    Example cubic01 shows some simple uses of cubic Béziercommands within a path. The example uses an internal CSS style sheet to assignstyling properties. Note that the control point for the "S" commandis computed automatically as the reflection of the control point for theprevious "C" command relative to the start point of the "S"command.

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 

  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="5cm" height="4cm" viewBox="0 0 500 400"

     xmlns="http://www.w3.org/2000/svg">

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

Example cubic01

View this exampleas SVG (SVG- and CSS-enabled browsers only)
 

下面的图片显示了三次Bézier曲线如何依赖控制点的位置而改变形状. 开始的五个例子解释单一的三次Bézier曲线路径段 . 右下角的例子显示一个"C"命令跟着一个"S"命令的情况.    Thefollowing picture shows some how cubic Bézier curves change their shapedepending on the position of the control points. The first five examplesillustrate a single cubic Bézier path segment. The example at the lower rightshows a "C" command followed by an "S" command.

View this exampleas SVG (SVG-enabled browsers only)
 

8.3.7 二次Bézier曲线命令  The quadratic Béziercurve commands

二次Bézier曲线命令如下:     Thequadratic Bézier commands are as follows:

命令Command

名字Name

参数Parameters

描述 Description

Q (absolute)
q (relative)

quadratic Bézier curveto

(x1 y1 x y)+

从当前点到(x,y) 利用(x1,y1)作为曲线的控制点绘制二次 Bézier 曲线. Q (大写) 表示跟随的是绝对坐标;q (小写) 表示跟随的是相对坐标. 可以通过指定一系列坐标偶来绘制Bézier 曲线串. 在此命令结束时, 新的当前点设置为Bézier 曲线串所提供的最后一对坐标(x,y).      Draws a quadratic Bézier curve from the current point to (x,y) using (x1,y1) as the control point.Q (uppercase) indicates that absolute coordinates will follow;q (lowercase) indicates that relative coordinates will follow. Multiple sets of coordinates may be specified to draw a polybézier. At the end of the command, the new current point becomes the final (x,y) coordinate pair used in the polybézier.

T (absolute)
t (relative)

Shorthand/smooth quadratic Bézier curveto

(x y)+

从当前点到(x,y)绘制二次 Bézier 曲线. 控制点被假设为在前一命令的控制点相对于当前点的反射. (如果不存在以前的命令或者以前的命令不是Q, q, T 或 t, 则假设控制点为当前点.) .T (大写) 表示跟随的是绝对坐标;t (小写) 表示跟随的是相对坐标. 可以通过指定一系列坐标偶来绘制Bézier 曲线串. 在此命令结束时, 新的当前点设置为Bézier 曲线串所提供的最后一对坐标(x,y).   Draws a quadratic Bézier curve from the current point to (x,y). The control point is assumed to be the reflection of the control point on the previous command relative to the current point. (If there is no previous command or if the previous command was not a Q, q, T or t, assume the control point is coincident with the current point.)T (uppercase) indicates that absolute coordinates will follow; t (lowercase) indicates that relative coordinates will follow. At the end of the command, the new current point becomes the final (x,y) coordinate pair used in the polybézier.

例子 quad01 显示在一条路径中二次 Bézier曲线命令的某些简单使用. 注意"T"命令的控制点是通过自动计算以前"Q"命令的控制点相对于此"T"命令的起始点的反射而得到的.    Example quad01 shows some simple uses ofquadratic Bézier commands within a path. Note that the control point for the"T" command is computed automatically as the reflection of thecontrol point for the previous "Q" command relative to the start pointof the "T" command.

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 

  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="12cm" height="6cm" viewBox="0 0 1200 600"

     xmlns="http://www.w3.org/2000/svg">

  <title>Example quad01 - quadratic Bezier commands in path data</title>

  <desc>Picture showing a "Q" a "T" command,

        along with annotations showing the control points

        and end points</desc>

  <rect x="1" y="1" width="1198" height="598"

        fill="none" stroke="blue" stroke-width="1" />

  <path d="M200,300 Q400,50 600,300 T1000,300"

        fill="none" stroke="red" stroke-width="5"  />

  <!-- End points -->

  <g fill="black" >

    <circle cx="200" cy="300" r="10"/>

    <circle cx="600" cy="300" r="10"/>

    <circle cx="1000" cy="300" r="10"/>

  </g>

  <!-- Control points and lines from end points to control points -->

  <g fill="#888888" >

    <circle cx="400" cy="50" r="10"/>

    <circle cx="800" cy="550" r="10"/>

  </g>

  <path d="M200,300 L400,50 L600,300 

           L800,550 L1000,300"

        fill="none" stroke="#888888" stroke-width="2" />

</svg>

Example quad01

View this exampleas SVG (SVG-enabled browsers only)
 

8.3.8 椭圆弧曲线命令 The elliptical arc curve commands

椭圆弧曲线命令如下:   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)+

从当前点到(x, y)绘制一条椭圆弧 . 椭圆的尺寸和方向由两个半径 (rx,ry) 和 一个x-axis-rotation来定义, x-axis-rotation表示整个椭圆相对于当前坐标系如何进行旋转. 椭圆的中心 (cx,cy) 可以自动计算以便满足利用其它参数所提供的约束.large-arc-flag 和 sweep-flag 参与此自动计算并帮助确定如何绘制此段椭圆弧 .       Draws an elliptical arc from the current point to (x,y). The size and orientation of the ellipse are defined by two radii (rx,ry) and 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.

例子 arcs01 显示在一条路径中椭圆弧命令的某些简单使用.   Example arcs01 shows some simple uses of arc commandswithin a path.

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 

  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="12cm" height="5.25cm" viewBox="0 0 1200 400"

     xmlns="http://www.w3.org/2000/svg">

  <title>Example arcs01 - arc commands in path data</title>

  <desc>Picture of a pie chart with two pie wedges and

        a picture of a line with arc blips</desc>

  <rect x="1" y="1" width="1198" height="398"

        fill="none" stroke="blue" stroke-width="1" />

  <path d="M300,200 h-150 a150,150 0 1,0 150,-150 z"

        fill="red" stroke="blue" stroke-width="5" />

  <path d="M275,175 v-150 a150,150 0 0,0 -150,150 z"

        fill="yellow" stroke="blue" stroke-width="5" />

  <path d="M600,350 l 50,-25 

           a25,25 -30 0,1 50,-25 l 50,-25 

           a25,50 -30 0,1 50,-25 l 50,-25 

           a25,75 -30 0,1 50,-25 l 50,-25 

           a25,100 -30 0,1 50,-25 l 50,-25"

        fill="none" stroke="red" stroke-width="5"  />

</svg>

Example arcs01

View this exampleas SVG (SVG-enabled browsers only)
 

椭圆弧命令绘制一段椭圆遇到下列约束:    The elliptical arc command draws a section of anellipse which meets the following constraints:

• 弧从当前点开始  the arc starts at the current point
• 弧终止于点(x, y) the arc ends at point (x,y)
• 椭圆有两个半径(rx, ry)  the ellipse has the two radii (rx,ry)
• 椭圆的 x-轴相对于当前坐标系的 x-轴旋转x-axis-rotation .    the x-axis of the ellipse is rotated byx-axis-rotation relative to the x-axis of the current coordinate system.

对于大多数情形, 实际上有四种不同的弧 (两个不同的椭圆, 每个具有两种不同的弧段)它们都满足这些约束. large-arc-flag和sweep-flag 表示将绘制四种弧的哪一种, 解释如下:    For mostsituations, there are actually four different arcs (two different ellipses,each with two different arc sweeps) that satisfy these constraints.large-arc-flagand sweep-flag indicate which one of the four arcs are drawn,as follows:

• 四种候选的弧段, 其中两个表示大于或等于180度的弧段 ( "大弧"), 而两个表示小于180度的弧段 ( "小弧"). 如果 large-arc-flag 为 '1', 那么选择的是两个大弧段之一; 否则,large-arc-flag 为 '0', 那么选择的是两个小弧段之一,   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"). Iflarge-arc-flag is '1', then one of the two larger arc sweeps will be chosen; otherwise, iflarge-arc-flag is '0', one of the smaller arc sweeps will be chosen,
• 如果 sweep-flag 为 '1', 那么绘制"正角"方向的弧 (即, 椭圆公式 x=cx+rx*cos(theta) 和 y=cy+ry*sin(theta) 被求值使得 theta 开始于一个对应当前点的角并不断增加直到到达(x,y)). 如果值为 0 则绘制"负角"方向的弧 (即, theta 开始于一个对应当前点的角并不断减少直到到达(x,y)).     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)).

下面说明large-arc-flag和sweep-flag的四种组合以及基于这些标记值所绘制的四种不同的弧. 对于每种情况, 使用下列路径数据命令:    Thefollowing illustrates the four combinations oflarge-arc-flagandsweep-flag and the four different arcs that will be drawnbased on the values of these flags. For each case, the following path datacommand was used:

<path d="M 125,75 a100,50 0 ?,? 100,50"

      style="fill:none; stroke:red; stroke-width:6"/>

这里"?,?"由"0,0" "0,1" "1,0" 和 "1,1" 所替换以便生成四种可能的情况.    where "?,?" is replaced by"0,0" "0,1" "1,0" and "1,1" to generatethe four possible cases.

View this exampleas SVG (SVG-enabled browsers only)
 

参见 E椭圆弧实现注记获取关于椭圆弧命令路径数据的详细实现注记.   Refer to Ellipticalarc implementation notes for detailed implementation notes for the pathdata elliptical arc commands.

8.3.9 路径数据的语法 The grammar for path data

下列记号用于路径数据的语法的Backus-Naur范式 (BNF) 的描述:   The followingnotation is used in the Backus-Naur Form (BNF) description of the grammar forpath data:

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

下列为精图路径的BNF.  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)

BNF 的处理必须尽可能多地使用一个给定的BNF产生式, 直到遇到一个字符不再满足产生式而停止. 于是, 在字符串 "M 100-200"中, "moveto"的第一个坐标用掉字符 "100" 并且停止在减号处因为减号不能跟在"坐标"产生式的数字后面. 其结果是第一个坐标为 "100" 而第二个坐标为"-200".     The processing of the BNF mustconsume as much of a given BNF production as possible, stopping at the pointwhen 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 uponencountering the minus sign because the minus sign cannot follow a digit in theproduction of a "coordinate". The result is that the first coordinatewill be "100" and the second coordinate will be "-200".

类似地, 对于字符串"M 0.6.5"而言,"moveto"的第一个坐标用掉字符"0.6" 并且停在第二个小数点处因为"坐标"的产生式只允许包含一个小数点. 其结果是第一个坐标为 "0.6" 而第二个坐标为".5"    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 becausethe production of a "coordinate" only allows one decimal point. Theresult is that the first coordinate will be "0.6" and the secondcoordinate will be ".5".

8.4 沿一条路径的距离   Distance alonga path

各种操作, 包括 路径上的文本 和 移动动画以及 各种描边操作,要求用户代理计算沿着一图形元素(比如一个'path')的几何的距离.    Various operations, includingtext on a pathand motionanimation and various strokeoperations, require that the user agent compute the distance along thegeometry of a graphics element, such as a 'path'.

对于计算沿着一条路径的距离存在严格的数学方法, 可是公式十分复杂并要求大量的计算. 建议作品和用户代理使用尽可能使用可以产生精确结果的算法; 但是, 为了适应实现的差别和帮助距离计算产生的结果接近作者的意图, 使用pathLength 性质来提供作者对路径的总长的计算结果使得用户代理可以通过计算pathLength与用户代理自己对路径总长的计算值的比率来缩放沿一条路径的距离的计算值.    Exact mathematics exist for computing distance along a path, but the formulasare highly complex and require substantial computation. It is recommended thatauthoring products and user agents employ algorithms that produce as preciseresults as possible; however, to accommodate implementation differences and tohelp distance calculations produce results that approximate author intent, thepathLength attribute can be used to provide theauthor's computation of the total length of the path so that the user agent canscale distance-along-a-path computations by the ratio of pathLengthto the user agent's own computed value for total path length.

在一个 'path' 元素内"moveto" 操作的长度定义为零. 只有各种"lineto", "curveto" 和 "arcto" 命令对路径长度的计算发生作用.    A "moveto" operation within a 'path' element is defined to have zero length. Onlythe various "lineto", "curveto" and "arcto"commands contribute to path length calculations.

 

8.5 DOM interfaces

The following interfaces are defined below: SVGPathSeg, SVGPathSegClosePath, SVGPathSegMovetoAbs, SVGPathSegMovetoRel, SVGPathSegLinetoAbs, SVGPathSegLinetoRel, SVGPathSegCurvetoCubicAbs, SVGPathSegCurvetoCubicRel, SVGPathSegCurvetoQuadraticAbs,SVGPathSegCurvetoQuadraticRel,SVGPathSegArcAbs,SVGPathSegArcRel,SVGPathSegLinetoHorizontalAbs,SVGPathSegLinetoHorizontalRel,SVGPathSegLinetoVerticalAbs,SVGPathSegLinetoVerticalRel,SVGPathSegCurvetoCubicSmoothAbs,SVGPathSegCurvetoCubicSmoothRel,SVGPathSegCurvetoQuadraticSmoothAbs,SVGPathSegCurvetoQuadraticSmoothRel,SVGPathSegList,SVGAnimatedPathData,SVGPathElement.

 

Interface SVGPathSeg

The SVGPathSeginterface is a base interface that corresponds to a single command within apath data specification.

IDL Definition

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;

};

 

Definition group Path Segment Types

Definedconstants

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.

PATHSEG_CLOSEPATH

 

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

PATHSEG_MOVETO_ABS

 

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

PATHSEG_MOVETO_REL

 

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

PATHSEG_LINETO_ABS

 

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

PATHSEG_LINETO_REL

 

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

PATHSEG_CURVETO_CUBIC_ABS

 

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

PATHSEG_CURVETO_CUBIC_REL

 

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

PATHSEG_CURVETO_QUADRATIC_ABS

 

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

PATHSEG_CURVETO_QUADRATIC_REL

 

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

PATHSEG_ARC_ABS

 

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

PATHSEG_ARC_REL

 

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

PATHSEG_LINETO_HORIZONTAL_ABS

 

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

PATHSEG_LINETO_HORIZONTAL_REL

 

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

PATHSEG_LINETO_VERTICAL_ABS

 

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

PATHSEG_LINETO_VERTICAL_REL

 

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

PATHSEG_CURVETO_CUBIC_SMOOTH_ABS

 

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

PATHSEG_CURVETO_CUBIC_SMOOTH_REL

 

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

PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS

 

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

PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL

 

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

Attributes

readonly unsignedshort pathSegType

The type of thepath segment as specified by one of the constants specified above.

readonly DOMString pathSegTypeAsLetter

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

 

Interface SVGPathSegClosePath

The SVGPathSegClosePathinterface corresponds to a "closepath" (z) path data command.

IDL Definition

interface SVGPathSegClosePath : SVGPathSeg {};

 

 

Interface SVGPathSegMovetoAbs

The SVGPathSegMovetoAbsinterface corresponds to an "absolute moveto" (M) path data command.

IDL Definition

interface SVGPathSegMovetoAbs : SVGPathSeg { 

           attribute float   x;

                       // raises DOMException on setting

           attribute float   y;

                       // raises DOMException on setting

};

 

Attributes

float x

The absolute Xcoordinate for the end point of this path segment.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

float y

The absolute Ycoordinate for the end point of this path segment.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

 

Interface SVGPathSegMovetoRel

The SVGPathSegMovetoRelinterface corresponds to an "relative moveto" (m) path data command.

IDL Definition

interface SVGPathSegMovetoRel : SVGPathSeg { 

           attribute float   x;

                       // raises DOMException on setting

           attribute float   y;

                       // raises DOMException on setting

};

 

Attributes

float x

The relative Xcoordinate for the end point of this path segment.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

float y

The relative Ycoordinate for the end point of this path segment.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

 

Interface SVGPathSegLinetoAbs

The SVGPathSegLinetoAbsinterface corresponds to an "absolute lineto" (L) path data command.

IDL Definition

interface SVGPathSegLinetoAbs : SVGPathSeg { 

           attribute float   x;

                       // raises DOMException on setting

           attribute float   y;

                       // raises DOMException on setting

};

 

Attributes

float x

The absolute Xcoordinate for the end point of this path segment.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

float y

The absolute Ycoordinate for the end point of this path segment.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

 

Interface SVGPathSegLinetoRel

The SVGPathSegLinetoRelinterface corresponds to an "relative lineto" (l) path data command.

IDL Definition

interface SVGPathSegLinetoRel : SVGPathSeg { 

           attribute float   x;

                       // raises DOMException on setting

           attribute float   y;

                       // raises DOMException on setting

};

 

Attributes

float x

The relative Xcoordinate for the end point of this path segment.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

float y

The relative Ycoordinate for the end point of this path segment.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

 

Interface SVGPathSegCurvetoCubicAbs

The SVGPathSegCurvetoCubicAbsinterface corresponds to an "absolute cubic Bézier curveto" (C) pathdata command.

IDL Definition

interface SVGPathSegCurvetoCubicAbs : SVGPathSeg { 

           attribute float   x;

                       // raises DOMException on setting

           attribute float   y;

                       // raises DOMException on setting

           attribute float   x1;

                       // raises DOMException on setting

           attribute float   y1;

                       // raises DOMException on setting

           attribute float   x2;

                       // raises DOMException on setting

           attribute float   y2;

                       // raises DOMException on setting

};

 

Attributes

float x

The absolute Xcoordinate for the end point of this path segment.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

float y

The absolute Ycoordinate for the end point of this path segment.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

float x1

The absolute Xcoordinate for the first control point.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

float y1

The absolute Ycoordinate for the first control point.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

float x2

The absolute Xcoordinate for the second control point.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

float y2

The absolute Ycoordinate for the second control point.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

 

Interface SVGPathSegCurvetoCubicRel

The SVGPathSegCurvetoCubicRelinterface corresponds to a "relative cubic Bézier curveto" (c) pathdata command.

IDL Definition

interface SVGPathSegCurvetoCubicRel : SVGPathSeg { 

           attribute float   x;

                       // raises DOMException on setting

           attribute float   y;

                       // raises DOMException on setting

           attribute float   x1;

                       // raises DOMException on setting

           attribute float   y1;

                       // raises DOMException on setting

           attribute float   x2;

                       // raises DOMException on setting

           attribute float   y2;

                       // raises DOMException on setting

};

 

Attributes

float x

The relative Xcoordinate for the end point of this path segment.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

float y

The relative Ycoordinate for the end point of this path segment.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

float x1

The relative Xcoordinate for the first control point.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

float y1

The relative Ycoordinate for the first control point.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

float x2

The relative Xcoordinate for the second control point.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

float y2

The relative Ycoordinate for the second control point.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

 

Interface SVGPathSegCurvetoQuadraticAbs

The SVGPathSegCurvetoQuadraticAbsinterface corresponds to an "absolute quadratic Bézier curveto" (Q)path data command.

IDL Definition

interface SVGPathSegCurvetoQuadraticAbs : SVGPathSeg { 

           attribute float   x;

                       // raises DOMException on setting

           attribute float   y;

                       // raises DOMException on setting

           attribute float   x1;

                       // raises DOMException on setting

           attribute float   y1;

                       // raises DOMException on setting

};

 

Attributes

float x

The absolute Xcoordinate for the end point of this path segment.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

float y

The absolute Ycoordinate for the end point of this path segment.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

float x1

The absolute Xcoordinate for the control point.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

float y1

The absolute Ycoordinate for the control point.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

 

Interface SVGPathSegCurvetoQuadraticRel

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

IDL Definition

interface SVGPathSegCurvetoQuadraticRel : SVGPathSeg { 

           attribute float   x;

                       // raises DOMException on setting

           attribute float   y;

                       // raises DOMException on setting

           attribute float   x1;

                       // raises DOMException on setting

           attribute float   y1;

                       // raises DOMException on setting

};

 

Attributes

float x

The relative Xcoordinate for the end point of this path segment.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

float y

The relative Ycoordinate for the end point of this path segment.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

float x1

The relative Xcoordinate for the control point.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

float y1

The relative Ycoordinate for the control point.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

 

Interface SVGPathSegArcAbs

The SVGPathSegArcAbsinterface corresponds to an "absolute arcto" (A) path data command.

IDL Definition

interface SVGPathSegArcAbs : SVGPathSeg { 

           attribute float   x;

                       // raises DOMException on setting

           attribute float   y;

                       // raises DOMException on setting

           attribute float   r1;

                       // raises DOMException on setting

           attribute float   r2;

                       // raises DOMException on setting

           attribute float   angle;

                       // raises DOMException on setting

           attribute boolean largeArcFlag;

                       // raises DOMException on setting

           attribute boolean sweepFlag;

                       // raises DOMException on setting

};

 

Attributes

float x

The absolute Xcoordinate for the end point of this path segment.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

float y

The absolute Ycoordinate for the end point of this path segment.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

float r1

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

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

float r2

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

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

float angle

The rotationangle in degrees for the ellipse's x-axis relative to the x-axis of the usercoordinate system.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

boolean largeArcFlag

The value of thelarge-arc-flag parameter.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

boolean sweepFlag

The value of thesweep-flag parameter.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

 

Interface SVGPathSegArcRel

The SVGPathSegArcRelinterface corresponds to a "relative arcto" (a) path data command.

IDL Definition

interface SVGPathSegArcRel : SVGPathSeg { 

           attribute float   x;

                       // raises DOMException on setting

           attribute float   y;

                       // raises DOMException on setting

           attribute float   r1;

                       // raises DOMException on setting

           attribute float   r2;

                       // raises DOMException on setting

           attribute float   angle;

                       // raises DOMException on setting

           attribute boolean largeArcFlag;

                       // raises DOMException on setting

           attribute boolean sweepFlag;

                       // raises DOMException on setting

};

 

Attributes

float x

The relative Xcoordinate for the end point of this path segment.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

float y

The relative Ycoordinate for the end point of this path segment.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

float r1

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

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

float r2

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

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

float angle

The rotationangle in degrees for the ellipse's x-axis relative to the x-axis of the usercoordinate system.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

boolean largeArcFlag

The value of thelarge-arc-flag parameter.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

boolean sweepFlag

The value of thesweep-flag parameter.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

 

Interface SVGPathSegLinetoHorizontalAbs

The SVGPathSegLinetoHorizontalAbsinterface corresponds to an "absolute horizontal lineto" (H) pathdata command.

IDL Definition

interface SVGPathSegLinetoHorizontalAbs : SVGPathSeg { 

           attribute float   x;

                       // raises DOMException on setting

};

 

Attributes

float x

The absolute Xcoordinate for the end point of this path segment.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

 

Interface SVGPathSegLinetoHorizontalRel

The SVGPathSegLinetoHorizontalRelinterface corresponds to a "relative horizontal lineto" (h) path datacommand.

IDL Definition

interface SVGPathSegLinetoHorizontalRel : SVGPathSeg { 

           attribute float   x;

                       // raises DOMException on setting

};

 

Attributes

float x

The relative Xcoordinate for the end point of this path segment.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

 

Interface SVGPathSegLinetoVerticalAbs

The SVGPathSegLinetoVerticalAbsinterface corresponds to an "absolute vertical lineto" (V) path datacommand.

IDL Definition

interface SVGPathSegLinetoVerticalAbs : SVGPathSeg { 

           attribute float   y;

                       // raises DOMException on setting

};

 

Attributes

float y

The absolute Ycoordinate for the end point of this path segment.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

 

Interface SVGPathSegLinetoVerticalRel

The SVGPathSegLinetoVerticalRelinterface corresponds to a "relative vertical lineto" (v) path datacommand.

IDL Definition

interface SVGPathSegLinetoVerticalRel : SVGPathSeg { 

           attribute float   y;

                       // raises DOMException on setting

};

 

Attributes

float y

The relative Ycoordinate for the end point of this path segment.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

 

Interface SVGPathSegCurvetoCubicSmoothAbs

The SVGPathSegCurvetoCubicSmoothAbsinterface corresponds to an "absolute smooth cubic curveto" (S) pathdata command.

IDL Definition

interface SVGPathSegCurvetoCubicSmoothAbs : SVGPathSeg { 

           attribute float   x;

                       // raises DOMException on setting

           attribute float   y;

                       // raises DOMException on setting

           attribute float   x2;

                       // raises DOMException on setting

           attribute float   y2;

                       // raises DOMException on setting

};

 

Attributes

float x

The absolute Xcoordinate for the end point of this path segment.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

float y

The absolute Ycoordinate for the end point of this path segment.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

float x2

The absolute Xcoordinate for the second control point.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

float y2

The absolute Ycoordinate for the second control point.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

 

Interface SVGPathSegCurvetoCubicSmoothRel

The SVGPathSegCurvetoCubicSmoothRelinterface corresponds to a "relative smooth cubic curveto" (s) pathdata command.

IDL Definition

interface SVGPathSegCurvetoCubicSmoothRel : SVGPathSeg { 

           attribute float   x;

                       // raises DOMException on setting

           attribute float   y;

                       // raises DOMException on setting

           attribute float   x2;

                       // raises DOMException on setting

           attribute float   y2;

                       // raises DOMException on setting

};

 

Attributes

float x

The relative Xcoordinate for the end point of this path segment.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

float y

The relative Ycoordinate for the end point of this path segment.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

float x2

The relative Xcoordinate for the second control point.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

float y2

The relative Ycoordinate for the second control point.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

 

Interface SVGPathSegCurvetoQuadraticSmoothAbs

The SVGPathSegCurvetoQuadraticSmoothAbsinterface corresponds to an "absolute smooth quadratic curveto" (T)path data command.

IDL Definition

interface SVGPathSegCurvetoQuadraticSmoothAbs : SVGPathSeg { 

           attribute float   x;

                       // raises DOMException on setting

           attribute float   y;

                       // raises DOMException on setting

};

 

Attributes

float x

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

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

float y

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

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

 

Interface SVGPathSegCurvetoQuadraticSmoothRel

The SVGPathSegCurvetoQuadraticSmoothRelinterface corresponds to a "relative smooth quadratic curveto" (t)path data command.

IDL Definition

interface SVGPathSegCurvetoQuadraticSmoothRel : SVGPathSeg { 

           attribute float   x;

                       // raises DOMException on setting

           attribute float   y;

                       // raises DOMException on setting

};

 

Attributes

float x

The relative Xcoordinate for the end point of this path segment.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

float y

The relative Ycoordinate for the end point of this path segment.

Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

 

Interface SVGPathSegList

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 variousSVGxxxList interfaces.

IDL Definition

interface SVGPathSegList { 

  readonly attribute unsigned long numberOfItems;

  void   clear (  )

                  raises( DOMException );

  SVGPathSeg initialize ( in SVGPathSeg newItem )

                  raises( DOMException, SVGException );

  SVGPathSeg getItem ( in unsigned long index )

                  raises( DOMException );

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

                  raises( DOMException, SVGException );

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

                  raises( DOMException, SVGException );

  SVGPathSeg removeItem ( in unsigned long index )

                  raises( DOMException );

  SVGPathSeg appendItem ( in SVGPathSeg newItem )

                  raises( DOMException, SVGException );

};

 

Attributes

readonly unsignedlong numberOfItems

The number ofitems in the list.

Methods

clear

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

No Parameters

No Return Value

Exceptions

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised when the list cannot be modified.

initialize

Clears allexisting current items from the list and re-initializes the list to hold thesingle item specified by the parameter.

Parameters

in SVGPathSeg newItem

 

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

Return value

SVGPathSeg

 

The item being inserted into the list.

Exceptions

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised when the list cannot be modified.

SVGException

 

SVG_WRONG_TYPE_ERR: Raised if parameter newItem is the wrong type of object for the given list.

getItem

Returns thespecified item from the list.

Parameters

in unsigned long index

 

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

Return value

SVGPathSeg

 

The selected item.

Exceptions

DOMException

 

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

insertItemBefore

Inserts a newitem into the list at the specified position. The first item is number 0. IfnewItem is already in a list, it is removed from its previous list before it isinserted into this list.

Parameters

in SVGPathSeg newItem

 

The item which is to be inserted into the list.

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

Return value

SVGPathSeg

 

The inserted item.

Exceptions

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised when the list cannot be modified.

SVGException

 

SVG_WRONG_TYPE_ERR: Raised if parameter newItem is the wrong type of object for the given list.

replaceItem

Replaces anexisting item in the list with a new item. If newItem is already in a list, itis removed from its previous list before it is inserted into this list.

Parameters

in SVGPathSeg newItem

 

The item which is to be inserted into the list.

in unsigned long index

 

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

Return value

SVGPathSeg

 

The inserted item.

Exceptions

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised when the list cannot be modified.

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

SVGException

 

SVG_WRONG_TYPE_ERR: Raised if parameter newItem is the wrong type of object for the given list.

removeItem

Removes anexisting item from the list.

Parameters

in unsigned long index

 

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

Return value

SVGPathSeg

 

The removed item.

Exceptions

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised when the list cannot be modified.

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

appendItem

Inserts a newitem at the end of the list. If newItem is already in a list, it is removedfrom its previous list before it is inserted into this list.

Parameters

in SVGPathSeg newItem

 

The item which is to be inserted into the list. The first item is number 0.

Return value

SVGPathSeg

 

The inserted item.

Exceptions

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: Raised when the list cannot be modified.

SVGException

 

SVG_WRONG_TYPE_ERR: Raised if parameter newItem is the wrong type of object for the given list.

 

Interface SVGAnimatedPathData

The SVGAnimatedPathDatainterface supports elements which have a 'd' attribute which holds SVG pathdata, and supports the ability to animate that attribute.

The SVGAnimatedPathDatainterface 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 bemodified. Modifications to normalizedPathSegListmight cause entries in pathSegList to bebroken into a set of normalized path segments.

Additionally, the 'd' attribute on the 'path' elementaccessed via the XML DOM (e.g., using the getAttribute()method call) will reflect any changes made to pathSegListor normalizedPathSegList.

IDL Definition

interface SVGAnimatedPathData { 

  readonly attribute SVGPathSegList   pathSegList;

  readonly attribute SVGPathSegList   normalizedPathSegList;

  readonly attribute SVGPathSegList   animatedPathSegList;

  readonly attribute SVGPathSegList   animatedNormalizedPathSegList;

};

 

Attributes

readonly SVGPathSegList pathSegList

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

readonly SVGPathSegList normalizedPathSegList

Provides access to the base(i.e., static) contents of the d attribute in aform where all path data commands are expressed in terms of the followingsubset 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, ifthe d attribute has an "absolute moveto(M)" and an "absolute arcto (A)" command, then pathSegList will have one SVG_PATHSEG_MOVETO_ABSentry followed by a series of SVG_PATHSEG_ARC_ABS entries which approximate thearc. This alternate representation is available to provide a simpler interfaceto 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).

readonly SVGPathSegList animatedPathSegList

Provides access to the currentanimated contents of the d attribute in a formwhich matches one-for-one with SVG's syntax. If the given attribute or propertyis being animated, contains the current animated value of the attribute orproperty, and both the object itself and its contents are readonly. If thegiven attribute or property is not currently being animated, contains the samevalue as 'pathSegList'.

readonly SVGPathSegList animatedNormalizedPathSegList

Provides access to the currentanimated contents of the d attribute in a formwhere all path data commands are expressed in terms of the following subset ofSVGPathSeg 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 beinganimated, contains the current animated value of the attribute or property, andboth the object itself and its contents are readonly. If the given attribute orproperty is not currently being animated, contains the same value as'normalizedPathSegList'.

 

Interface SVGPathElement

The SVGPathElementinterface corresponds to the 'path' element.

IDL Definition

interface SVGPathElement : 

                SVGElement,

                SVGTests,

                SVGLangSpace,

                SVGExternalResourcesRequired,

                SVGStylable,

                SVGTransformable,

                events::EventTarget,

                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 );

};

 

Attributes

readonly SVGAnimatedNumber pathLength

Corresponds toattribute pathLength on the given 'path' element.

Methods

getTotalLength

Returns the useragent's computed value for the total length of the path using the user agent'sdistance-along-a-path algorithm, as a distance in the current user coordinatesystem.

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

No Exceptions

getPathSegAtLength

Returns theindex into pathSegList which is distanceunits along the path, utilizing the user agent's distance-along-a-pathalgorithm.

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, where the first path segment is number 0.

No Exceptions

createSVGPathSegClosePath

Returns astand-alone, parentless SVGPathSegClosePath object.

No Parameters

Return value

SVGPathSegClosePath

 

A stand-alone, parentless SVGPathSegClosePath object.

No Exceptions

createSVGPathSegMovetoAbs

Returns astand-alone, parentless SVGPathSegMovetoAbs object.

Parameters

in float x

 

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

in float y

 

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

Return value

SVGPathSegMovetoAbs

 

A stand-alone, parentless SVGPathSegMovetoAbs object.

No Exceptions

createSVGPathSegMovetoRel

Returns astand-alone, parentless SVGPathSegMovetoRel object.

Parameters

in float x

 

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

in float y

 

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

Return value

SVGPathSegMovetoRel

 

A stand-alone, parentless SVGPathSegMovetoRel object.

No Exceptions

createSVGPathSegLinetoAbs

Returns astand-alone, parentless SVGPathSegLinetoAbs object.

Parameters

in float x

 

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

in float y

 

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

Return value

SVGPathSegLinetoAbs

 

A stand-alone, parentless SVGPathSegLinetoAbs object.

No Exceptions

createSVGPathSegLinetoRel

Returns astand-alone, parentless SVGPathSegLinetoRel object.

Parameters

in float x

 

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

in float y

 

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

Return value

SVGPathSegLinetoRel

 

A stand-alone, parentless SVGPathSegLinetoRel object.

No Exceptions

createSVGPathSegCurvetoCubicAbs

Returns astand-alone, parentless SVGPathSegCurvetoCubicAbs object.

Parameters

in float x

 

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

in float y

 

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

in float x1

 

The absolute X coordinate for the first control point.

in float y1

 

The absolute Y coordinate for the first control point.

in float x2

 

The absolute X coordinate for the second control point.

in float y2

 

The absolute Y coordinate for the second control point.

Return value

SVGPathSegCurvetoCubicAbs

 

A stand-alone, parentless SVGPathSegCurvetoCubicAbs object.

No Exceptions

createSVGPathSegCurvetoCubicRel

Returns astand-alone, parentless SVGPathSegCurvetoCubicRel object.

Parameters

in float x

 

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

in float y

 

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

in float x1

 

The relative X coordinate for the first control point.

in float y1

 

The relative Y coordinate for the first control point.

in float x2

 

The relative X coordinate for the second control point.

in float y2

 

The relative Y coordinate for the second control point.

Return value

SVGPathSegCurvetoCubicRel

 

A stand-alone, parentless SVGPathSegCurvetoCubicRel object.

No Exceptions

createSVGPathSegCurvetoQuadraticAbs

Returns astand-alone, parentless SVGPathSegCurvetoQuadraticAbs object.

Parameters

in float x

 

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

in float y

 

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

in float x1

 

The absolute X coordinate for the control point.

in float y1

 

The absolute Y coordinate for the control point.

Return value

SVGPathSegCurvetoQuadraticAbs

 

A stand-alone, parentless SVGPathSegCurvetoQuadraticAbs object.

No Exceptions

createSVGPathSegCurvetoQuadraticRel

Returns astand-alone, parentless SVGPathSegCurvetoQuadraticRel object.

Parameters

in float x

 

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

in float y

 

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

in float x1

 

The relative X coordinate for the control point.

in float y1

 

The relative Y coordinate for the control point.

Return value

SVGPathSegCurvetoQuadraticRel

 

A stand-alone, parentless SVGPathSegCurvetoQuadraticRel object.

No Exceptions

createSVGPathSegArcAbs

Returns astand-alone, parentless SVGPathSegArcAbs object.

Parameters

in float x

 

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

in float y

 

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

in float r1

 

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

in float r2

 

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

in float angle

 

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

in boolean largeArcFlag

 

The value for the large-arc-flag parameter.

in boolean sweepFlag

 

The value for the sweep-flag parameter.

Return value

SVGPathSegArcAbs

 

A stand-alone, parentless SVGPathSegArcAbs object.

No Exceptions

createSVGPathSegArcRel

Returns astand-alone, parentless SVGPathSegArcRel object.

Parameters

in float x

 

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

in float y

 

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

in float r1

 

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

in float r2

 

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

in float angle

 

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

in boolean largeArcFlag

 

The value for the large-arc-flag parameter.

in boolean sweepFlag

 

The value for the sweep-flag parameter.

Return value

SVGPathSegArcRel

 

A stand-alone, parentless SVGPathSegArcRel object.

No Exceptions

createSVGPathSegLinetoHorizontalAbs

Returns astand-alone, parentless SVGPathSegLinetoHorizontalAbs object.

Parameters

in float x

 

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

Return value

SVGPathSegLinetoHorizontalAbs

 

A stand-alone, parentless SVGPathSegLinetoHorizontalAbs object.

No Exceptions

createSVGPathSegLinetoHorizontalRel

Returns astand-alone, parentless SVGPathSegLinetoHorizontalRel object.

Parameters

in float x

 

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

Return value

SVGPathSegLinetoHorizontalRel

 

A stand-alone, parentless SVGPathSegLinetoHorizontalRel object.

No Exceptions

createSVGPathSegLinetoVerticalAbs

Returns astand-alone, parentless SVGPathSegLinetoVerticalAbs object.

Parameters

in float y

 

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

Return value

SVGPathSegLinetoVerticalAbs

 

A stand-alone, parentless SVGPathSegLinetoVerticalAbs object.

No Exceptions

createSVGPathSegLinetoVerticalRel

Returns astand-alone, parentless SVGPathSegLinetoVerticalRel object.

Parameters

in float y

 

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

Return value

SVGPathSegLinetoVerticalRel

 

A stand-alone, parentless SVGPathSegLinetoVerticalRel object.

No Exceptions

createSVGPathSegCurvetoCubicSmoothAbs

Returns astand-alone, parentless SVGPathSegCurvetoCubicSmoothAbs object.

Parameters

in float x

 

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

in float y

 

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

in float x2

 

The absolute X coordinate for the second control point.

in float y2

 

The absolute Y coordinate for the second control point.

Return value

SVGPathSegCurvetoCubicSmoothAbs

 

A stand-alone, parentless SVGPathSegCurvetoCubicSmoothAbs object.

No Exceptions

createSVGPathSegCurvetoCubicSmoothRel

Returns astand-alone, parentless SVGPathSegCurvetoCubicSmoothRel object.

Parameters

in float x

 

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

in float y

 

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

in float x2

 

The relative X coordinate for the second control point.

in float y2

 

The relative Y coordinate for the second control point.

Return value

SVGPathSegCurvetoCubicSmoothRel

 

A stand-alone, parentless SVGPathSegCurvetoCubicSmoothRel object.

No Exceptions

createSVGPathSegCurvetoQuadraticSmoothAbs

Returns astand-alone, parentless SVGPathSegCurvetoQuadraticSmoothAbs object.

Parameters

in float x

 

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

in float y

 

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

Return value

SVGPathSegCurvetoQuadraticSmoothAbs

 

A stand-alone, parentless SVGPathSegCurvetoQuadraticSmoothAbs object.

No Exceptions

createSVGPathSegCurvetoQuadraticSmoothRel

Returns astand-alone, parentless SVGPathSegCurvetoQuadraticSmoothRel object.

Parameters

in float x

 

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

in float y

 

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

Return value

SVGPathSegCurvetoQuadraticSmoothRel

 

A stand-alone, parentless SVGPathSegCurvetoQuadraticSmoothRel object.

No Exceptions

---

previous next   contents   elements   attributes   properties   index