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 last moveto)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:
形状的轮廓线定义. 参见 路径数据. 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 for text 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 the d attribute containsthemoveto, line, curve (both cubic and quadraticBéziers),arc and closepath instructions.
例子 triangle01 指定一个形状为三角形的路径. ( M 表示 moveto, L 表示lineto's, 而 z 表示 closepath). Example triangle01specifies a path in the shape of a triangle. (TheM indicatesa moveto, the L's indicate lineto's, and thez indicates a closepath).
<?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 an M).
- 多余的空白符和分隔符比如逗号可以省去(例如, "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 new subpath:
命令Command | 名字Name | 参数Parameters | 描述 Description |
M (absolute) | 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 | 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) | 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) | 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) | 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) | 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) | 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) | 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) | 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) | 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"). If large-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-flagand sweep-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. |
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 distance
units 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