矢量路径
内容
- 8.1简介
- 8.2 “路径”元素
- 8.3路径数据
- 8.4沿路径的距离
- 8.5 DOM接口
- 8.5.1接口SVGPathSeg
- 8.5.2接口SVGPathSegClosePath
- 8.5.3接口SVGPathSegMovetoAbs
- 8.5.4接口SVGPathSegMovetoRel
- 8.5.5接口SVGPathSegLinetoAbs
- 8.5.6接口SVGPathSegLinetoRel
- 8.5.7接口SVGPathSegCurvetoCubicAbs
- 8.5.8接口SVGPathSegCurvetoCubicRel
- 8.5.9接口SVGPathSegCurvetoQuadraticAbs
- 8.5.10接口SVGPathSegCurvetoQuadraticRel
- 8.5.11接口SVGPathSegArcAbs
- 8.5.12接口SVGPathSegArcRel
- 8.5.13接口SVGPathSegLinetoHorizontalAbs
- 8.5.14接口SVGPathSegLinetoHorizontalRel
- 8.5.15接口SVGPathSegLinetoVerticalAbs
- 8.5.16接口SVGPathSegLinetoVerticalRel
- 8.5.17接口SVGPathSegCurvetoCubicSmoothAbs
- 8.5.18接口SVGPathSegCurvetoCubicSmoothRel
- 8.5.19接口SVGPathSegCurvetoQuadraticSmoothAbs
- 8.5.20接口SVGPathSegCurvetoQuadraticSmoothRel
- 8.5.21接口SVGPathSegList
- 8.5.22接口SVGAnimatedPathData
- 8.5.23接口SVGPathElement
8.1简介
路径表示可以填充，抚摸，用作剪切路径或三者的任意组合的形状的轮廓。（请参阅填充，描边和绘制服务器以及剪切，屏蔽和合成。）
使用当前点的概念描述路径。与纸上绘画类似，当前点可以被认为是笔的位置。可以改变笔的位置，并且可以通过以直线或曲线拖动笔来跟踪形状的轮廓（打开或关闭）。
路径表示对象轮廓的几何形状，根据moveto（设置新的当前点）， lineto（绘制直线），curveto（使用立方Bézier绘制曲线），弧（椭圆或圆弧）定义和closepath（通过画线到最后一个moveto来关闭当前形状）元素。复合路径（即，具有多个子路径的路径）可以允许诸如对象中的“环形孔”之类的效果。
本章介绍SVG路径的语法，行为和DOM接口。SVG路径的各种实现说明可以在'path'元素实现说明和Elliptical arc实现说明中找到。
8.2 “路径”元素
'路径'
分类：
内容模型：
以任何顺序的以下任意数量的元素：
属性：
DOM接口：
属性定义：
d =“ 路径数据 ”
形状轮廓的定义。请参阅路径数据。
动画：是的。 仅当动画规范中的每个路径数据规范与“d”属性具有完全相同的路径数据命令列表时，才可以使用路径数据动画。如果指定了动画并且路径数据命令列表不相同，则动画规范出错（请参阅错误处理）。动画引擎基于给定动画元素的属性分别将每个参数插值到每个路径数据命令。标志和布尔值被插值为0到1之间的分数，任何非零值都被认为是1 / true的值。
pathLength =“ <number> ”
作者以用户单位计算路径的总长度。此值用于校准用户代理自己的路径距离 计算与作者的距离。用户代理将通过'pathLength'与用户代理自己的总路径长度计算值的比率来缩放所有沿路径计算。'pathLength'可能影响路径上的文本计算， 动画动画和各种笔画操作。
负值是错误（请参阅错误处理）。
动画：是的。
8.3路径数据
8.3.1路径数据的一般信息
通过包含'path' 元素来定义路径，该'path'元素包含d =“（路径数据）” 属性，其中'd'属性包含 moveto，line，curve（立方和二次Béziers），arc和closepath 指令。
示例triangle01 指定三角形形状的路径。（该 中号表示通过MoveTo中， 大号小号表明了lineTo s，并且 Ž表示closepath）。
<span style="color:#a52a2a"><？xml version =“1.0”standalone =“no”？>
<！DOCTYPE svg PUBLIC“ - // W3C // DTD SVG 1.1 // EN”
“http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
<svg width =“4cm”height =“4cm”viewBox =“0 0 400 400”
xmlns =“http://www.w3.org/2000/svg”version =“1.1”>
<title>示例triangle01-'path'的简单示例</ title>
<desc>绘制三角形的路径</ desc>
<rect x =“1”y =“1”width =“398”height =“398”
fill =“none”stroke =“blue”/>
<路径d =“M 100 100 L 300 100 L 200 300 z”
fill =“red”stroke =“blue”stroke-width =“3”/>
</ SVG></span> |
路径数据可以包含换行符，因此可以分成多行以提高可读性。由于某些相关工具的行长度限制，建议SVG生成器跨多行分割长路径数据字符串，每行不超过255个字符。另请注意，换行符仅允许在路径数据中的某些位置。
路径数据的语法是简洁的，以便允许最小的文件大小和有效的下载，因为许多SVG文件将由它们的路径数据支配。SVG尝试最小化路径数据大小的一些方法如下：
- 所有指令都表示为一个字符（例如， moveto表示为M）。
- 可以消除多余的空白区域和诸如逗号的分隔符（例如，“M 100 100 L 200 200”包含不必要的空间并且可以更紧凑地表达为“M100 100L200 200”）。
- 如果连续多次使用相同的命令，则可以在后续命令中删除命令字母（例如，您可以在“M 100 200 L 200 100 L -100 -200”中删除第二个“L”并使用“M 100” 200 L 200 100 -100 -200“而不是”。
- 所有命令的相对版本都可用（大写表示绝对坐标，小写表示相对坐标）。
- 替代形式的lineto可用于优化水平和垂直线（绝对和相对）的特殊情况。
- 可以使用替代形式的曲线来优化特殊情况，其中当前段上的一些控制点可以从前一段的控制点自动确定。
路径数据语法是前缀表示法（即，命令后跟参数）。唯一允许的小数点是Unicode U + 0046 FULL STOP（“。”）字符（在Unicode中也称为PERIOD，点和小数点），不允许使用其他分隔符[ UNICODE ]。（例如，以下是路径数据流中的无效数值：“13,000.56”。而是说：“13000.56”。）
对于命令的相对版本，所有坐标值都相对于命令开头的当前点。
在下表中，使用以下表示法：
- （）：参数分组
- +：需要一个或多个给定参数
以下部分列出了这些命令。
8.3.2 “moveto”命令
“moveto”命令（M或 m）建立新的当前点。效果就好像“笔”被抬起并移动到一个新的位置。路径数据段（如果有）必须以“moveto”命令开头。随后的“moveto”命令（即，当“moveto”不是第一个命令时）表示新子路径的开始 ：
| 命令 | 名称 | 参数 | 描述 |
|---|---|---|---|
| M（绝对值） m（相对） | 搬去 | （XY）+ | 在给定（x，y）坐标处开始新的子路径。 M（大写）表示将遵循绝对坐标; m（小写）表示将遵循相对坐标。如果moveto后跟多对坐标，则后续对被视为隐式lineto命令。因此，如果moveto是相对的，则隐式lineto命令将是相对的，而如果moveto是绝对的，则是绝对的。如果相对移动到（m）作为路径的第一个元素出现，然后将其视为一对绝对坐标。在这种情况下，即使初始移动被解释为绝对移动，后续的坐标对也被视为相对的。 |
8.3.3 “closepath”命令
“闭路径”（Z或z）结束当前子路径并导致从当前点到当前子路径的初始点绘制自动直线。如果“closepath”后面紧跟“moveto”，则“moveto”标识下一个子路径的起点。如果紧跟任何其他命令后跟随“closepath”，则下一个子路径将在与当前子路径相同的初始点开始。
当子路径以“关闭路径”结束时，它的行为与通过“lineto”命令在“stroke-linejoin” 和“stroke-linecap”中实现“手动”关闭子路径时的行为不同。使用“closepath”，子路径的最后一段的末尾使用“stroke-linejoin”的当前值与子路径的初始段的开头“连接” 。如果您通过“lineto”命令“手动”关闭子路径，则第一个段的开始和最后一个段的结尾不会连接，而是使用“stroke-linecap”的当前值进行上限。在命令结束时，
| 命令 | 名称 | 参数 | 描述 |
|---|---|---|---|
| Z或 z | closepath | （没有） | 通过从当前点到当前子路径的初始点绘制一条直线来关闭当前子路径。由于Z和z命令不带参数，因此它们具有相同的效果。 |
8.3.4 “lineto”命令
各种“lineto”命令从当前点绘制直线到新点：
| 命令 | 名称 | 参数 | 描述 |
|---|---|---|---|
| L（绝对） l（相对） | 了lineTo | （XY）+ | 从当前点到给定（x，y）坐标绘制一条线，该坐标成为新的当前点。 L（大写）表示将遵循绝对坐标; l（小写）表示将遵循相对坐标。可以指定多个坐标对来绘制折线。在命令结束时，新的当前点被设置为提供的最终坐标集。 |
| H（绝对值） h（相对） | 水平线 | X + | 绘制从当前点（cpx，cpy）到（x，cpy）的水平线。H（大写）表示将遵循绝对坐标; h （小写）表示将遵循相对坐标。可以提供多个x值（尽管通常这没有意义）。在命令结束时，新的当前点变为（x，cpy），表示x的最终值。 |
| V（绝对） v（相对） | 垂直线 | Y + | 绘制从当前点（cpx，cpy）到（cpx，y）的垂直线。V（大写）表示将遵循绝对坐标; v （小写）表示将遵循相对坐标。可以提供多个y值（尽管通常这没有意义）。在命令结束时，新的当前点变为（cpx，y），表示y的最终值。 |
8.3.5曲线命令
这三组命令绘制曲线：
- CubicBézier命令（C， c，S和 s）。立方贝塞尔曲线段由起点，终点和两个控制点定义。
- 二次Bézier命令（Q， q，T和 t）。二次贝塞尔曲线段由起点，终点和一个控制点定义。
- 椭圆弧命令（A和a）。椭圆弧段绘制椭圆的一段。
8.3.6三次Bézier曲线命令
立方Bézier命令如下：
| 命令 | 名称 | 参数 | 描述 |
|---|---|---|---|
| C（绝对） c（相对） | curveto | （x1 y1 x2 y2 xy）+ | 使用（x1，y1）作为曲线起点处的控制点和（x2，y2）作为曲线末端的控制点，绘制从当前点到（x，y）的三次Bézier曲线。C（大写）表示将遵循绝对坐标; c（小写）表示将遵循相对坐标。可以指定多组坐标来绘制多面体。在命令结束时，新的当前点成为多面体中使用的最终（x，y）坐标对。 |
| S（绝对） s（相对） | 速记/平滑曲线 | （x2 y2 xy）+ | 绘制从当前点到（x，y）的三次贝塞尔曲线。假设第一个控制点是前一个命令相对于当前点的第二个控制点的反射。（如果没有上一个命令或前一个命令不是C，c，S或s，则假设第一个控制点与当前点重合。）（x2，y2）是第二个控制点（即曲线末端的控制点）。 S（大写）表示将遵循绝对坐标; 小号（小写）表示将遵循相对坐标。可以指定多组坐标来绘制多面体。在命令结束时，新的当前点成为多面体中使用的最终（x，y）坐标对。 |
示例cubic01显示了路径中三次Bézier命令的一些简单用法。该示例使用内部CSS样式表来指定样式属性。注意，“S”命令的控制点是作为前一个“C”命令的控制点相对于“S”命令的起始点的反映而自动计算的。
<span style="color:#a52a2a"><？xml version =“1.0”standalone =“no”？>
<！DOCTYPE svg PUBLIC“ - // W3C // DTD SVG 1.1 // EN”
“http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
<svg width =“5cm”height =“4cm”viewBox =“0 0 500 400”
xmlns =“http://www.w3.org/2000/svg”version =“1.1”>
<title>路径数据</ title>中的cubic01-立方Bézier命令示例
<desc>图片显示路径数据的简单示例
使用“C”和“S”命令，
以及显示控制点的注释
和终点</ desc>
<style type =“text / css”> <！[CDATA [
.Border {fill：none; 行程：蓝色; 笔画宽度：1}
.Connect {fill：none; 行程：＃888888; 笔画宽度：2}
.SamplePath {fill：none; 行程：红色; 笔画宽度：5}
.EndPoint {fill：none; 行程：＃888888; 笔画宽度：2}
.CtlPoint {填写：＃888888; 中风：无}
.AutoCtlPoint {fill：none; 行程：蓝色; 笔画宽度：4}
.Label {font-size：22; font-family：Verdana}
]]> </样式>
<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></span> |
下图显示了一些立方贝塞尔曲线如何根据控制点的位置改变其形状。前五个例子说明了一个单立方Bézier路径段。右下角的示例显示“C”命令后跟“S”命令。
8.3.7二次Bézier曲线命令
二次Bézier命令如下：
| 命令 | 名称 | 参数 | 描述 |
|---|---|---|---|
| Q（绝对） q（相对） | 二次Bézier曲线 | （x1 y1 xy）+ | 使用（x1，y1）作为控制点，绘制从当前点到（x，y）的二次Bézier曲线。 Q（大写）表示将遵循绝对坐标; q（小写）表示将遵循相对坐标。可以指定多组坐标来绘制多面体。在命令结束时，新的当前点成为多面体中使用的最终（x，y）坐标对。 |
| T（绝对值） t（相对） | 速记/平滑二次Bézier曲线 | （XY）+ | 绘制从当前点到（x，y）的二次贝塞尔曲线。假设控制点是前一个命令相对于当前点的控制点的反映。（如果没有上一个命令或前一个命令不是Q，q，T或t，则假设控制点与当前点重合。）T（大写）表示将遵循绝对坐标; t （小写）表示将遵循相对坐标。在命令结束时，新的当前点成为多面体中使用的最终（x，y）坐标对。 |
示例quad01显示了路径中二次Bézier命令的一些简单用法。注意，“T”命令的控制点自动计算为前一个“Q”命令的控制点相对于“T”命令的起始点的反映。
<span style="color:#a52a2a"><？xml version =“1.0”standalone =“no”？>
<！DOCTYPE svg PUBLIC“ - // W3C // DTD SVG 1.1 // EN”
“http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
<svg width =“12cm”height =“6cm”viewBox =“0 0 1200 600”
xmlns =“http://www.w3.org/2000/svg”version =“1.1”>
<title>示例quad01 - 路径数据中的二次Bézier命令</ title>
<desc>图片显示“Q”和“T”命令，
以及显示控制点的注释
和终点</ desc>
<rect x =“1”y =“1”width =“1198”height =“598”
fill =“none”stroke =“blue”stroke-width =“1”/>
<路径d =“M200,300 Q400,50 600,300 T1000,300”
fill =“none”stroke =“red”stroke-width =“5”/>
<！ - 结束点 - >
<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>的
<！ - 从终点到控制点的控制点和线 - >
<g fill =“＃888888”>
<circle cx =“400”cy =“50”r =“10”/>
<circle cx =“800”cy =“550”r =“10”/>
</ g>的
<路径d =“M200,300 L400,50 L600,300
L800,550 L1000,300“
fill =“none”stroke =“＃888888”stroke-width =“2”/>
</ SVG></span> |
8.3.8椭圆弧曲线命令
椭圆弧命令如下：
| 命令 | 名称 | 参数 | 描述 |
|---|---|---|---|
| A（绝对） a（相对） | 椭圆弧 | （rx ry x轴旋转大弧标志扫描标志x y）+ | 从当前点到（x，y）绘制一个椭圆弧。椭圆的大小和方向由两个半径（rx，ry）和 x轴旋转定义，其指示椭圆作为整体如何相对于当前坐标系旋转。自动计算椭圆的中心（cx， cy）以满足其他参数施加的约束。large-arc-flag和 sweep-flag有助于自动计算并帮助确定如何绘制弧。 |
示例arcs01显示了路径中弧命令的一些简单用法。
<span style="color:#a52a2a"><？xml version =“1.0”standalone =“no”？>
<！DOCTYPE svg PUBLIC“ - // W3C // DTD SVG 1.1 // EN”
“http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
<svg width =“12cm”height =“5.25cm”viewBox =“0 0 1200 400”
xmlns =“http://www.w3.org/2000/svg”version =“1.1”>
<title>示例arcs01 - 路径数据</ title>中的arc命令
<desc>饼图的图片有两个饼楔和
带有弧光的线条图片</ desc>
<rect x =“1”y =“1”width =“1198”height =“398”
fill =“none”stroke =“blue”stroke-width =“1”/>
<路径d =“M300,200 h-150 a150,150 0 1,0 150，-150 z”
fill =“red”stroke =“blue”stroke-width =“5”/>
<路径d =“M275,175 v-150 a150,150 0 0,0 -150,150 z”
fill =“yellow”stroke =“blue”stroke-width =“5”/>
<路径d =“M600,350升50，-25
a25,25 -30 0,150，-25 l 50，-25
a25,50 -30 0,1 50，-25 l 50，-25
a25,75 -30 0,150，-25 l 50，-25
a25,100 -30 0,150，-25 l 50，-25“
fill =“none”stroke =“red”stroke-width =“5”/>
</ SVG></span> |
椭圆弧命令绘制椭圆的一部分，满足以下约束：
- 弧从当前点开始
- 弧在点（x， y）处结束
- 椭圆有两个半径（rx， ry）
- 椭圆的x轴相对于当前坐标系的x轴旋转 x轴旋转。
对于大多数情况，实际上存在四个不同的弧（两个不同的椭圆，每个具有两个不同的弧扫描）以满足这些约束。large-arc-flag 和sweep-flag表示绘制四个弧中的哪一个，如下所示：
- 在四个候选弧扫描中，两个将表示大于或等于180度的弧扫描（“大弧”），两个将表示小于或等于180度的弧扫描（“小 - 弧”）。如果 大弧标志为'1'，则将选择两个较大弧扫描中的一个; 否则，如果 大弧标志为'0'，将选择一个较小的弧扫描，
- 如果sweep-flag为'1'，则弧将以“正角”方向绘制（即椭圆公式x = cx + rx * cos（theta）和y = cy + ry * sin（theta）评估θ，使得theta以对应于当前点的角度开始并且积极地增加直到弧到达（x，y））。值0使得弧以“负角度”方向绘制（即，θ以对应于当前点的角度值开始并且减小直到弧到达（x，y））。
下面说明了大弧标志和扫描标志的四种组合以及 将根据这些标志的值绘制的四种不同的弧。对于每种情况，使用以下路径数据命令：
<路径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”代替，以产生四种可能的情况。
有关路径数据椭圆弧命令的详细实施说明，请参阅椭圆弧实施说明。
8.3.9路径数据的语法
以下表示法用于Backus-Naur形式（BNF）路径数据语法描述：
- *：0或更多
- +：1或更多
- ？：0或1
- （）：分组
- |：分隔替代品
- 双引号环绕文字
以下是SVG路径的BNF。
<span style="color:#a52a2a">SVG路径：
wsp * moveto-drawto-command-groups？WSP *
MOVETO-drawto命令的基团：
通过MoveTo-drawto-命令组
| moveto-drawto-command-group wsp * moveto-drawto-command-groups
通过MoveTo-drawto-命令组：
moveto wsp * drawto-commands？
drawto的命令：
drawto命令
| drawto-command wsp * drawto-commands
drawto命令：
closepath
| 了lineTo
| 水平了lineTo
| 垂直了lineTo
| curveto
| 光滑curveto
| 二次 - 贝塞尔 - curveto
| 光滑二次 - 贝塞尔 - curveto
| 椭圆弧
搬去：
（“M”|“m”）wsp * moveto-argument-sequence
MOVETO参数的序列：
坐标对
| 坐标对逗号wsp？线 - 参数序列
closepath：
（“Z”|“z”）
了lineTo：
（“L”|“l”）wsp * lineto-argument-sequence
线 - 参数序列：
坐标对
| 坐标对逗号wsp？线 - 参数序列
水平了lineTo：
（“H”|“h”）wsp * horizontal-lineto-argument-sequence
水平线 - 参数序列：
坐标
| 坐标逗号wsp？水平线 - 参数序列
垂直了lineTo：
（“V”|“v”）wsp * vertical-lineto-argument-sequence
垂直线 - 参数序列：
坐标
| 坐标逗号wsp？垂直线 - 参数序列
curveto：
（“C”|“c”）wsp * curveto-argument-sequence
curveto参数的序列：
curveto参数的
| curveto-argument comma-wsp？curveto参数的序
curveto-参数：
坐标对逗号wsp？坐标对逗号wsp？坐标对
光滑curveto：
（“S”|“s”）wsp * smooth-curveto-argument-sequence
光滑curveto参数的序列：
光滑curveto参数的
| smooth-curveto-argument逗号-wsp？光滑curveto参数的序
光滑curveto-参数：
坐标对逗号wsp？坐标对
二次 - 贝塞尔 - curveto：
（“Q”|“q”）wsp * quadratic-bezier-curveto-argument-sequence
二次 - 贝塞尔 - curveto参数的序列：
二次 - 贝塞尔 - curveto参数的
| quadratic-bezier-curveto-argument逗号-wsp？
二次 - 贝塞尔 - curveto参数的序列
二次 - 贝塞尔 - curveto-参数：
坐标对逗号wsp？坐标对
光滑二次 - 贝塞尔 - curveto：
（“T”|“t”）wsp * smooth-quadratic-bezier-curveto-argument-sequence
平滑二次-贝塞尔-curveto参数的序列：
坐标对
| 坐标对逗号wsp？平滑二次-贝塞尔-curveto参数的序
椭圆弧：
（“A”|“a”）wsp * elliptical-arc-argument-sequence
椭圆弧参数序列：
椭圆弧参数
| elliptical-arc-argument comma-wsp？椭圆弧参数序列
椭圆弧参数：
非负数字逗号-wsp？非负数字逗号-wsp？
数字逗号-wsp标志逗号-wsp？标志逗号wsp？坐标对
坐标对：
坐标逗号wsp？坐标
坐标：
数
非负号码：
整数常数
| 浮点常数
数：
标志？整数常数
| 标志？浮点常数
旗：
“0”| “1”
逗号WSP：
（wsp +逗号？wsp *）| （逗号wsp *）
逗号：
“”
整型常量：
数字序列
浮点常数：
分数常数指数？
| 数字序列指数
分数不变：
数字序列？“” 数字序列
| 数字序列“。”
指数：
（“e”|“E”）标志？数字序列
标志：
“+”| “ - ”
数字序列：
数字
| 数字数字序列
数字：
“0”| “1”| “2”| “3”| “4”| “5”| “6”| “7”| “8”| “9”
WSP：
（＃x20 |＃x9 | #xD | #xA）
</span>BNF的处理必须消耗尽可能多的给定BNF产量，在遇到不再满足产品的字符时停止。因此，在字符串“M 100-200”中，“moveto”的第一个坐标消耗字符“100”并在遇到减号时停止，因为减号不能跟随“坐标”产生中的数字。结果是第一个坐标为“100”，第二个坐标为“-200”。
类似地，对于字符串“M 0.6.5”，“moveto”的第一个坐标消耗字符“0.6”并在遇到第二个小数点时停止，因为“坐标”的产生仅允许一个小数点。结果是第一个坐标为“0.6”，第二个坐标为“.5”。
请注意，BNF允许路径“d”属性为空。这不是错误，而是禁用路径的渲染。
8.4沿路径的距离
各种操作，包括路径上的文本和运动动画 以及各种笔划操作，要求用户代理计算沿着图形元素的几何形状的距离，例如“路径”。
存在用于计算沿路径的距离的精确数学，但是公式非常复杂并且需要大量计算。建议创作产品和用户代理使用能够产生尽可能精确结果的算法; 但是，为了适应实现差异并帮助距离计算产生近似作者意图的结果，'pathLength'属性可用于提供作者对路径总长度的计算，以便用户代理可以沿着距离缩放距离-path计算“pathLength”与用户代理自己的总路径长度计算值之比。
“path”元素内的“moveto”操作被定义为具有零长度。只有各种“lineto”，“curveto”和“arcto”命令有助于路径长度计算。
8.5 DOM接口
8.5.1接口SVGPathSeg
所述SVGPathSeg接口是一个路径数据指定内对应于单个命令一个基本接口。
<span style="color:#000000">interface <strong>SVGPathSeg</strong> {
//路径段类型
const unsigned short <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSeg__PATHSEG_UNKNOWN" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSeg__PATHSEG_UNKNOWN">PATHSEG_UNKNOWN</a> = 0;
const unsigned short <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSeg__PATHSEG_CLOSEPATH" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSeg__PATHSEG_CLOSEPATH">PATHSEG_CLOSEPATH</a> = 1;
const unsigned short <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSeg__PATHSEG_MOVETO_ABS" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSeg__PATHSEG_MOVETO_ABS">PATHSEG_MOVETO_ABS</a> = 2;
const unsigned short <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSeg__PATHSEG_MOVETO_REL" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSeg__PATHSEG_MOVETO_REL">PATHSEG_MOVETO_REL</a> = 3;
const unsigned short <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSeg__PATHSEG_LINETO_ABS" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSeg__PATHSEG_LINETO_ABS">PATHSEG_LINETO_ABS</a> = 4;
const unsigned short <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSeg__PATHSEG_LINETO_REL" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSeg__PATHSEG_LINETO_REL">PATHSEG_LINETO_REL</a> = 5;
const unsigned short <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSeg__PATHSEG_CURVETO_CUBIC_ABS" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSeg__PATHSEG_CURVETO_CUBIC_ABS">PATHSEG_CURVETO_CUBIC_ABS</a> = 6;
const unsigned short <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSeg__PATHSEG_CURVETO_CUBIC_REL" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSeg__PATHSEG_CURVETO_CUBIC_REL">PATHSEG_CURVETO_CUBIC_REL</a> = 7;
const unsigned short <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSeg__PATHSEG_CURVETO_QUADRATIC_ABS" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSeg__PATHSEG_CURVETO_QUADRATIC_ABS">PATHSEG_CURVETO_QUADRATIC_ABS</a> = 8;
const unsigned short <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSeg__PATHSEG_CURVETO_QUADRATIC_REL" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSeg__PATHSEG_CURVETO_QUADRATIC_REL">PATHSEG_CURVETO_QUADRATIC_REL</a> = 9;
const unsigned short <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSeg__PATHSEG_ARC_ABS" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSeg__PATHSEG_ARC_ABS">PATHSEG_ARC_ABS</a> = 10;
const unsigned short <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSeg__PATHSEG_ARC_REL" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSeg__PATHSEG_ARC_REL">PATHSEG_ARC_REL</a> = 11;
const unsigned short <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSeg__PATHSEG_LINETO_HORIZONTAL_ABS" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSeg__PATHSEG_LINETO_HORIZONTAL_ABS">PATHSEG_LINETO_HORIZONTAL_ABS</a> = 12;
const unsigned short <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSeg__PATHSEG_LINETO_HORIZONTAL_REL" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSeg__PATHSEG_LINETO_HORIZONTAL_REL">PATHSEG_LINETO_HORIZONTAL_REL</a> = 13;
const unsigned short <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSeg__PATHSEG_LINETO_VERTICAL_ABS" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSeg__PATHSEG_LINETO_VERTICAL_ABS">PATHSEG_LINETO_VERTICAL_ABS</a> = 14;
const unsigned short <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSeg__PATHSEG_LINETO_VERTICAL_REL" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSeg__PATHSEG_LINETO_VERTICAL_REL">PATHSEG_LINETO_VERTICAL_REL</a> = 15;
const unsigned short <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSeg__PATHSEG_CURVETO_CUBIC_SMOOTH_ABS" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSeg__PATHSEG_CURVETO_CUBIC_SMOOTH_ABS">PATHSEG_CURVETO_CUBIC_SMOOTH_ABS</a> = 16;
const unsigned short <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSeg__PATHSEG_CURVETO_CUBIC_SMOOTH_REL" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSeg__PATHSEG_CURVETO_CUBIC_SMOOTH_REL">PATHSEG_CURVETO_CUBIC_SMOOTH_REL</a> = 17;
const unsigned short <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSeg__PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSeg__PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS">PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS</a> = 18;
const unsigned short <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSeg__PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSeg__PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL">PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL</a> = 19;
readonly属性unsigned short <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSeg__pathSegType" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSeg__pathSegType">pathSegType</a> ;
readonly属性DOMString <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSeg__pathSegTypeAsLetter" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSeg__pathSegTypeAsLetter">pathSegTypeAsLetter</a> ;
};</span>“路径段类型”组中的常量：
PATHSEG_UNKNOWN （unsigned short）
单位类型不是预定义类型之一。尝试定义此类型的新值或尝试将现有值切换为此类型无效。
PATHSEG_CLOSEPATH （unsigned short）
对应于“closepath”（z）路径数据命令。
PATHSEG_MOVETO_ABS （无符号短）
对应于“绝对移动”（M）路径数据命令。
PATHSEG_MOVETO_REL （无符号短）
对应于“相对移动”（m）路径数据命令。
PATHSEG_LINETO_ABS （unsigned short）
对应于“绝对线路”（L）路径数据命令。
PATHSEG_LINETO_REL （无符号短）
对应于“相对线路”（l）路径数据命令。
PATHSEG_CURVETO_CUBIC_ABS （无符号短）
对应于“绝对立方Bézier曲线到”（C）路径数据命令。
PATHSEG_CURVETO_CUBIC_REL （无符号短）
对应于“相对立方Bézier曲线到”（c）路径数据命令。
PATHSEG_CURVETO_QUADRATIC_ABS （unsigned short）
对应于“绝对二次Bézier曲线到”（Q）路径数据命令。
PATHSEG_CURVETO_QUADRATIC_REL （无符号短）
对应于“相对二次Bézier曲线到”（q）路径数据命令。
PATHSEG_ARC_ABS （无符号短）
对应于“绝对arcto”（A）路径数据命令。
PATHSEG_ARC_REL （无符号短）
对应于“相对arcto”（a）路径数据命令。
PATHSEG_LINETO_HORIZONTAL_ABS （无符号短）
对应于“绝对水平线到”（H）路径数据命令。
PATHSEG_LINETO_HORIZONTAL_REL （无符号短）
对应于“相对水平线到”（h）路径数据命令。
PATHSEG_LINETO_VERTICAL_ABS （无符号短）
对应于“绝对垂直线路”（V）路径数据命令。
PATHSEG_LINETO_VERTICAL_REL （无符号短）
对应于“相对垂直线到”（v）路径数据命令。
PATHSEG_CURVETO_CUBIC_SMOOTH_ABS （无符号短）
对应于“绝对平滑三次曲线到”（S）路径数据命令。
PATHSEG_CURVETO_CUBIC_SMOOTH_REL （无符号短）
对应于“相对平滑的立方曲线到”（s）路径数据命令。
PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS （无符号短）
对应于“绝对平滑二次曲线到”（T）路径数据命令。
PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL （无符号短）
对应于“相对平滑的二次曲线到”（t）路径数据命令。
属性：
pathSegType （readonly unsigned short）
由此接口上定义的常量之一指定的路径段的类型。
pathSegTypeAsLetter （readonly DOMString）
路径段的类型，由相应的一个字符命令名称指定。
8.5.2接口SVGPathSegClosePath
所述SVGPathSegClosePath接口对应于“closepath”（z）的数据路径指令。
<span style="color:#000000">interface <strong>SVGPathSegClosePath</strong>：<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" class="idlinterface">SVGPathSeg</a> {
};</span>8.5.3接口SVGPathSegMovetoAbs
所述SVGPathSegMovetoAbs接口对应于“绝对通过MoveTo”（M）路径数据命令。
<span style="color:#000000">interface <strong>SVGPathSegMovetoAbs</strong>：<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" class="idlinterface">SVGPathSeg</a> {
属性float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegMovetoAbs__x" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegMovetoAbs__x">x</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
attribute float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegMovetoAbs__y" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegMovetoAbs__y">y</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
};</span>属性：
x （浮动）
此路径段结束点的绝对X坐标。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
y （浮动）
此路径段结束点的绝对Y坐标。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
8.5.4接口SVGPathSegMovetoRel
所述SVGPathSegMovetoRel接口对应于“相对通过MoveTo”（M）路径数据命令。
<span style="color:#000000">interface <strong>SVGPathSegMovetoRel</strong>：<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" class="idlinterface">SVGPathSeg</a> {
属性float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegMovetoRel__x" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegMovetoRel__x">x</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
attribute float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegMovetoRel__y" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegMovetoRel__y">y</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
};</span>属性：
x （浮动）
此路径段的结束点的相对X坐标。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
y （浮动）
此路径段结束点的相对Y坐标。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
8.5.5接口SVGPathSegLinetoAbs
所述SVGPathSegLinetoAbs接口对应于“绝对了lineTo”（L）的路径数据命令。
<span style="color:#000000">interface <strong>SVGPathSegLinetoAbs</strong>：<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" class="idlinterface">SVGPathSeg</a> {
属性float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegLinetoAbs__x" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegLinetoAbs__x">x</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
attribute float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegLinetoAbs__y" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegLinetoAbs__y">y</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
};</span>属性：
x （浮动）
此路径段结束点的绝对X坐标。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
y （浮动）
此路径段结束点的绝对Y坐标。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
8.5.6接口SVGPathSegLinetoRel
所述SVGPathSegLinetoRel接口对应于“相对了lineTo”（L）的路径数据命令。
<span style="color:#000000">interface <strong>SVGPathSegLinetoRel</strong>：<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" class="idlinterface">SVGPathSeg</a> {
属性float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegLinetoRel__x" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegLinetoRel__x">x</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
attribute float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegLinetoRel__y" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegLinetoRel__y">y</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
};</span>属性：
x （浮动）
此路径段的结束点的相对X坐标。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
y （浮动）
此路径段结束点的相对Y坐标。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
8.5.7接口SVGPathSegCurvetoCubicAbs
所述SVGPathSegCurvetoCubicAbs接口对应于“绝对三次贝塞尔curveto”（C）的路径数据命令。
<span style="color:#000000">interface <strong>SVGPathSegCurvetoCubicAbs</strong>：<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" class="idlinterface">SVGPathSeg</a> {
属性float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoCubicAbs__x" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoCubicAbs__x">x</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
attribute float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoCubicAbs__y" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoCubicAbs__y">y</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
属性float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoCubicAbs__x1" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoCubicAbs__x1">x1</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
attribute float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoCubicAbs__y1" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoCubicAbs__y1">y1</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
属性float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoCubicAbs__x2" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoCubicAbs__x2">x2</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
attribute float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoCubicAbs__y2" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoCubicAbs__y2">y2</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
};</span>属性：
x （浮动）
此路径段结束点的绝对X坐标。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
y （浮动）
此路径段结束点的绝对Y坐标。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
x1 （浮动）
第一个控制点的绝对X坐标。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
y1 （浮动）
第一个控制点的绝对Y坐标。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
x2 （浮动）
第二个控制点的绝对X坐标。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
y2 （浮动）
第二个控制点的绝对Y坐标。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
8.5.8接口SVGPathSegCurvetoCubicRel
所述SVGPathSegCurvetoCubicRel接口对应于“相对三次贝塞尔curveto”（c）中的路径数据命令。
<span style="color:#000000">interface <strong>SVGPathSegCurvetoCubicRel</strong>：<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" class="idlinterface">SVGPathSeg</a> {
属性float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoCubicRel__x" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoCubicRel__x">x</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
attribute float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoCubicRel__y" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoCubicRel__y">y</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
属性float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoCubicRel__x1" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoCubicRel__x1">x1</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
attribute float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoCubicRel__y1" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoCubicRel__y1">y1</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
属性float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoCubicRel__x2" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoCubicRel__x2">x2</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
attribute float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoCubicRel__y2" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoCubicRel__y2">y2</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
};</span>属性：
x （浮动）
此路径段的结束点的相对X坐标。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
y （浮动）
此路径段结束点的相对Y坐标。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
x1 （浮动）
第一个控制点的相对X坐标。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
y1 （浮动）
第一个控制点的相对Y坐标。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
x2 （浮动）
第二个控制点的相对X坐标。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
y2 （浮动）
第二个控制点的相对Y坐标。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
8.5.9接口SVGPathSegCurvetoQuadraticAbs
所述SVGPathSegCurvetoQuadraticAbs接口对应于“绝对二次贝塞尔curveto”（Q）路径数据命令。
<span style="color:#000000">interface <strong>SVGPathSegCurvetoQuadraticAbs</strong>：<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" class="idlinterface">SVGPathSeg</a> {
属性float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoQuadraticAbs__x" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoQuadraticAbs__x">x</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
attribute float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoQuadraticAbs__y" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoQuadraticAbs__y">y</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
属性float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoQuadraticAbs__x1" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoQuadraticAbs__x1">x1</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
attribute float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoQuadraticAbs__y1" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoQuadraticAbs__y1">y1</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
};</span>属性：
x （浮动）
此路径段结束点的绝对X坐标。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
y （浮动）
此路径段结束点的绝对Y坐标。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
x1 （浮动）
第一个控制点的绝对X坐标。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
y1 （浮动）
第一个控制点的绝对Y坐标。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
8.5.10接口SVGPathSegCurvetoQuadraticRel
所述SVGPathSegCurvetoQuadraticRel接口对应于“相对二次贝塞尔curveto”（Q）路径数据命令。
<span style="color:#000000">interface <strong>SVGPathSegCurvetoQuadraticRel</strong>：<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" class="idlinterface">SVGPathSeg</a> {
属性float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoQuadraticRel__x" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoQuadraticRel__x">x</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
attribute float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoQuadraticRel__y" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoQuadraticRel__y">y</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
属性float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoQuadraticRel__x1" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoQuadraticRel__x1">x1</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
attribute float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoQuadraticRel__y1" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoQuadraticRel__y1">y1</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
};</span>属性：
x （浮动）
此路径段的结束点的相对X坐标。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
y （浮动）
此路径段结束点的相对Y坐标。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
x1 （浮动）
第一个控制点的相对X坐标。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
y1 （浮动）
第一个控制点的相对Y坐标。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
8.5.11接口SVGPathSegArcAbs
所述SVGPathSegArcAbs接口对应于“绝对包含arcTo”（A）路径数据命令。
<span style="color:#000000">interface <strong>SVGPathSegArcAbs</strong>：<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" class="idlinterface">SVGPathSeg</a> {
属性float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegArcAbs__x" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegArcAbs__x">x</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
attribute float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegArcAbs__y" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegArcAbs__y">y</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
属性float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegArcAbs__r1" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegArcAbs__r1">r1</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
属性float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegArcAbs__r2" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegArcAbs__r2">r2</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
属性float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegArcAbs__angle" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegArcAbs__angle">angle</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
attribute boolean <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegArcAbs__largeArcFlag" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegArcAbs__largeArcFlag">largeArcFlag</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
attribute boolean <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegArcAbs__sweepFlag" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegArcAbs__sweepFlag">sweepFlag</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
};</span>属性：
x （浮动）
此路径段结束点的绝对X坐标。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
y （浮动）
此路径段结束点的绝对Y坐标。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
r1 （浮动）
椭圆的x轴半径（即r1）。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
r2 （浮动）
椭圆的y轴半径（即r2）。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
角度（浮动）
椭圆的x轴相对于用户坐标系的x轴的旋转角度（以度为单位）。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
largeArcFlag （boolean）
large-arc-flag参数的值。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
sweepFlag （布尔值）
sweep-flag参数的值。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
8.5.12接口SVGPathSegArcRel
所述SVGPathSegArcRel接口对应于“相对包含arcTo”（a）中路径数据命令。
<span style="color:#000000">interface <strong>SVGPathSegArcRel</strong>：<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" class="idlinterface">SVGPathSeg</a> {
属性float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegArcRel__x" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegArcRel__x">x</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
attribute float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegArcRel__y" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegArcRel__y">y</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
属性float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegArcRel__r1" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegArcRel__r1">r1</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
属性float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegArcRel__r2" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegArcRel__r2">r2</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
属性float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegArcRel__angle" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegArcRel__angle">angle</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
attribute boolean <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegArcRel__largeArcFlag" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegArcRel__largeArcFlag">largeArcFlag</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
attribute boolean <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegArcRel__sweepFlag" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegArcRel__sweepFlag">sweepFlag</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
};</span>属性：
x （浮动）
此路径段的结束点的相对X坐标。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
y （浮动）
此路径段结束点的相对Y坐标。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
r1 （浮动）
椭圆的x轴半径（即r1）。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
r2 （浮动）
椭圆的y轴半径（即r2）。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
角度（浮动）
椭圆的x轴相对于用户坐标系的x轴的旋转角度（以度为单位）。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
largeArcFlag （boolean）
large-arc-flag参数的值。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
sweepFlag （布尔值）
sweep-flag参数的值。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
8.5.13接口SVGPathSegLinetoHorizontalAbs
所述SVGPathSegLinetoHorizontalAbs接口对应于“绝对水平了lineTo”（H）路径数据命令。
<span style="color:#000000">interface <strong>SVGPathSegLinetoHorizontalAbs</strong>：<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" class="idlinterface">SVGPathSeg</a> {
属性float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegLinetoHorizontalAbs__x" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegLinetoHorizontalAbs__x">x</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
};</span>属性：
x （浮动）
此路径段结束点的绝对X坐标。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
8.5.14接口SVGPathSegLinetoHorizontalRel
所述SVGPathSegLinetoHorizontalRel接口对应于“相对水平了lineTo”（H）路径数据命令。
<span style="color:#000000">interface <strong>SVGPathSegLinetoHorizontalRel</strong>：<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" class="idlinterface">SVGPathSeg</a> {
属性float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegLinetoHorizontalRel__x" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegLinetoHorizontalRel__x">x</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
};</span>属性：
x （浮动）
此路径段的结束点的相对X坐标。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
8.5.15接口SVGPathSegLinetoVerticalAbs
所述SVGPathSegLinetoVerticalAbs接口对应于“绝对垂直了lineTo”（V）的路径数据命令。
<span style="color:#000000">interface <strong>SVGPathSegLinetoVerticalAbs</strong>：<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" class="idlinterface">SVGPathSeg</a> {
attribute float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegLinetoVerticalAbs__y" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegLinetoVerticalAbs__y">y</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
};</span>属性：
y （浮动）
此路径段结束点的绝对Y坐标。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
8.5.16接口SVGPathSegLinetoVerticalRel
所述SVGPathSegLinetoVerticalRel接口对应于“相对竖直了lineTo”（v）的路径数据命令。
<span style="color:#000000">interface <strong>SVGPathSegLinetoVerticalRel</strong>：<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" class="idlinterface">SVGPathSeg</a> {
attribute float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegLinetoVerticalRel__y" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegLinetoVerticalRel__y">y</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
};</span>属性：
y （浮动）
此路径段结束点的相对Y坐标。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
8.5.17接口SVGPathSegCurvetoCubicSmoothAbs
所述SVGPathSegCurvetoCubicSmoothAbs接口对应于“绝对平滑三次curveto”（S）路径数据命令。
<span style="color:#000000">interface <strong>SVGPathSegCurvetoCubicSmoothAbs</strong>：<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" class="idlinterface">SVGPathSeg</a> {
属性float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoCubicSmoothAbs__x" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoCubicSmoothAbs__x">x</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
attribute float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoCubicSmoothAbs__y" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoCubicSmoothAbs__y">y</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
属性float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoCubicSmoothAbs__x2" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoCubicSmoothAbs__x2">x2</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
attribute float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoCubicSmoothAbs__y2" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoCubicSmoothAbs__y2">y2</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
};</span>属性：
x （浮动）
此路径段结束点的绝对X坐标。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
y （浮动）
此路径段结束点的绝对Y坐标。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
x2 （浮动）
第二个控制点的绝对X坐标。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
y2 （浮动）
第二个控制点的绝对Y坐标。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
8.5.18接口SVGPathSegCurvetoCubicSmoothRel
所述SVGPathSegCurvetoCubicSmoothRel接口对应于“相对平滑三次curveto”（多个）路径数据命令。
<span style="color:#000000">interface <strong>SVGPathSegCurvetoCubicSmoothRel</strong>：<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" class="idlinterface">SVGPathSeg</a> {
属性float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoCubicSmoothRel__x" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoCubicSmoothRel__x">x</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
attribute float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoCubicSmoothRel__y" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoCubicSmoothRel__y">y</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
属性float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoCubicSmoothRel__x2" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoCubicSmoothRel__x2">x2</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
attribute float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoCubicSmoothRel__y2" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoCubicSmoothRel__y2">y2</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
};</span>属性：
x （浮动）
此路径段的结束点的相对X坐标。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
y （浮动）
此路径段结束点的相对Y坐标。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
x2 （浮动）
第二个控制点的相对X坐标。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
y2 （浮动）
第二个控制点的相对Y坐标。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
8.5.19接口SVGPathSegCurvetoQuadraticSmoothAbs
所述SVGPathSegCurvetoQuadraticSmoothAbs接口对应于“绝对平滑三次curveto”（T）的路径数据命令。
<span style="color:#000000">interface <strong>SVGPathSegCurvetoQuadraticSmoothAbs</strong>：<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" class="idlinterface">SVGPathSeg</a> {
属性float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoQuadraticSmoothAbs__x" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoQuadraticSmoothAbs__x">x</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
attribute float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoQuadraticSmoothAbs__y" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoQuadraticSmoothAbs__y">y</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
};</span>属性：
x （浮动）
此路径段结束点的绝对X坐标。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
y （浮动）
此路径段结束点的绝对Y坐标。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
8.5.20接口SVGPathSegCurvetoQuadraticSmoothRel
所述SVGPathSegCurvetoQuadraticSmoothRel接口对应于“相对平滑三次curveto”（t）的路径数据命令。
<span style="color:#000000">interface <strong>SVGPathSegCurvetoQuadraticSmoothRel</strong>：<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" class="idlinterface">SVGPathSeg</a> {
属性float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoQuadraticSmoothRel__x" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoQuadraticSmoothRel__x">x</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
attribute float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoQuadraticSmoothRel__y" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegCurvetoQuadraticSmoothRel__y">y</a> setraises（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
};</span>属性：
x （浮动）
此路径段的结束点的相对X坐标。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
y （浮动）
此路径段结束点的相对Y坐标。
设置例外
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
8.5.21接口SVGPathSegList
此接口定义SVGPathSeg对象的列表。
SVGPathSegList与其他SVGxxxList接口具有相同的属性和方法。实现者可以考虑使用单个基类来实现各种SVGxxxList接口。
<span style="color:#000000">interface <strong>SVGPathSegList</strong> {
readonly属性unsigned long <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegList__numberOfItems" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegList__numberOfItems">numberOfItems</a> ;
void <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegList__clear" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegList__clear">clear</a>（）引发（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" class="idlinterface">SVGPathSeg </a> <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegList__initialize" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegList__initialize">初始化</a>（在<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" class="idlinterface">SVGPathSeg中使用</a> newItem）引发（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" class="idlinterface">SVGPathSeg </a> <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegList__getItem" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegList__getItem">getItem</a>（在无符号长索引中）引发（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" class="idlinterface">SVGPathSeg </a> <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegList__insertItemBefore" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegList__insertItemBefore">insertItemBefore</a>（在<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" class="idlinterface">SVGPathSeg</a> newItem中，在unsigned long索引中）引发（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" class="idlinterface">SVGPathSeg </a> <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegList__replaceItem" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegList__replaceItem">replaceItem</a>（在<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" class="idlinterface">SVGPathSeg</a> newItem中，在unsigned long索引中）引发（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" class="idlinterface">SVGPathSeg </a> <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegList__removeItem" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegList__removeItem">removeItem</a>（在无符号长索引中）引发（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" class="idlinterface">SVGPathSeg </a> <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegList__appendItem" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathSegList__appendItem">appendItem</a>（在<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSeg" class="idlinterface">SVGPathSeg</a> newItem中）引发（<a data-cke-saved-href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187" class="idlinterface">DOMException</a>）;
};</span>属性：
numberOfItems （只读无符号长）
列表中的项目数。
操作：
void clear（）
清除列表中所有现有的当前项，结果为空列表。
异常
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
当列表无法修改时引发。
SVGPathSeg 初始化（在SVGPathSeg newItem中）
清除列表中的所有现有当前项，并重新初始化列表以保存参数指定的单个项。如果插入的项目已经在列表中，则在将其插入此列表之前，它将从之前的列表中删除。插入的项目是项目本身而不是副本。
参数
-
SVGPathSeg newItem
应成为列表唯一成员的项目。
返回
正在插入列表的项目。
异常
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
当列表无法修改时引发。
SVGPathSeg getItem（在无符号长索引中）
从列表中返回指定的项目。返回的项目是项目本身而不是副本。对项目所做的任何更改都会立即反映在列表中。
参数
-
无符号长索引
要返回的列表中项目的索引。第一项是0号。
返回
所选项目。
异常
DOMException，代码INDEX_SIZE_ERR
如果索引号大于或等于numberOfItems，则引发。
SVGPathSeg insertItemBefore（在SVGPathSeg newItem中，在unsigned long 索引中）
在指定位置的列表中插入新项目。第一项是数字0.如果newItem已经在列表中，则在将其插入此列表之前，它将从之前的列表中删除。插入的项目是项目本身而不是副本。如果该项目已在此列表中，请注意之前要插入的项目的索引是在删除项目之前。
参数
-
SVGPathSeg newItem
要插入列表的项目。
-
无符号长索引
要插入新项目的项目的索引。第一项是数字0.如果索引等于0，则新项目将插入列表的前面。如果索引大于或等于numberOfItems，则新项目将附加到列表的末尾。
返回
插入的项目。
异常
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
当列表无法修改时引发。
SVGPathSeg replaceItem（在SVGPathSeg newItem中，在unsigned long 索引中）
使用新项替换列表中的现有项。如果 newItem已经在列表中，则在将其插入此列表之前，它将从之前的列表中删除。插入的项目是项目本身而不是副本。如果该项目已在此列表中，请注意要替换的项目的索引是在 删除项目之前。
参数
-
SVGPathSeg newItem
要插入列表的项目。
-
无符号长索引
要替换的项目的索引。第一项是0号。
返回
插入的项目。
异常
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
当列表无法修改时引发。
DOMException，代码INDEX_SIZE_ERR
如果索引号大于或等于numberOfItems，则引发。
SVGPathSeg removeItem（在unsigned long 索引中）
从列表中删除现有项目。
参数
-
无符号长索引
要删除的项目的索引。第一项是0号。
返回
删除的项目。
异常
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
当列表无法修改时引发。
DOMException，代码INDEX_SIZE_ERR
如果索引号大于或等于numberOfItems，则引发。
SVGPathSeg appendItem（在SVGPathSeg newItem中）
在列表末尾插入一个新项目。如果newItem已经在列表中，则在将其插入此列表之前，它将从之前的列表中删除。插入的项目是项目本身而不是副本。
参数
-
SVGPathSeg newItem
要插入的项目。第一项是0号。
返回
插入的项目。
异常
DOMException，代码NO_MODIFICATION_ALLOWED_ERR
当列表无法修改时引发。
8.5.22接口SVGAnimatedPathData
SVGAnimatedPathData接口支持具有 保存SVG路径数据的“d”属性的元素，并支持为该属性设置动画的功能。
所述SVGAnimatedPathData接口提供两个列表来访问和修改基（即，静态的）中的内容“d”属性：
- DOM属性pathSegList提供对“d”属性的静态/基本内容的访问，其形式与SVG的语法一对一匹配。
- DOM属性normalizedPathSegList提供对'd'属性的静态/基本内容的规范化访问，其中所有路径数据命令以SVGPathSeg类型的以下子集表示 ：SVG_PATHSEG_MOVETO_ABS（M），SVG_PATHSEG_LINETO_ABS（L），SVG_PATHSEG_CURVETO_CUBIC_ABS（C）和SVG_PATHSEG_CLOSEPATH（z）。
和两个列表来访问'd' 属性的当前动画值：
- DOM属性animatedPathSegList提供对“d”属性的当前动画内容的访问，其形式与SVG的语法一对一匹配。
- DOM属性animatedNormalizedPathSegList提供对'd' 属性的当前动画内容的规范化访问，其中所有路径数据命令以SVGPathSeg类型的以下子集表示：SVG_PATHSEG_MOVETO_ABS（M），SVG_PATHSEG_LINETO_ABS（L），SVG_PATHSEG_CURVETO_CUBIC_ABS（C）和SVG_PATHSEG_CLOSEPATH （Z）。
两个列表中的每一个始终保持同步。对一个列表的修改将立即导致修改相应的列表。对normalizedPathSegList的修改可能导致pathSegList中的条目 被分成一组规范化的路径段。
另外，通过XML DOM访问的'path'元素上的'd'属性（例如，使用 方法调用）将反映对pathSegList或 normalizedPathSegList所做的任何更改。getAttribute()
<span style="color:#000000">interface <strong>SVGAnimatedPathData</strong> {
readonly属性<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSegList" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSegList" class="idlinterface">SVGPathSegList </a> <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGAnimatedPathData__pathSegList" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGAnimatedPathData__pathSegList">pathSegList</a> ;
readonly属性<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSegList" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSegList" class="idlinterface">SVGPathSegList </a> <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGAnimatedPathData__normalizedPathSegList" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGAnimatedPathData__normalizedPathSegList">normalizedPathSegList</a> ;
readonly属性<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSegList" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSegList" class="idlinterface">SVGPathSegList </a> <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGAnimatedPathData__animatedPathSegList" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGAnimatedPathData__animatedPathSegList">animatedPathSegList</a> ;
readonly属性<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSegList" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSegList" class="idlinterface">SVGPathSegList </a> <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGAnimatedPathData__animatedNormalizedPathSegList" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGAnimatedPathData__animatedNormalizedPathSegList">animatedNormalizedPathSegList</a> ;
};</span>属性：
pathSegList （readonly SVGPathSegList）
提供对“d” 属性的基本（即静态）内容的访问，其形式与SVG的语法一对一匹配。因此，如果'd'属性具有“绝对移动（M）”和“绝对arcto（A）”命令，则pathSegList将具有两个条目：SVG_PATHSEG_MOVETO_ABS和SVG_PATHSEG_ARC_ABS。
normalizedPathSegList （readonly SVGPathSegList）
提供对“d”属性的基本（即静态）内容的访问， 其中所有路径数据命令均以SVGPathSeg 类型的以下子集表示：SVG_PATHSEG_MOVETO_ABS（M），SVG_PATHSEG_LINETO_ABS（L），SVG_PATHSEG_CURVETO_CUBIC_ABS（C ）和SVG_PATHSEG_CLOSEPATH（z）。因此，如果'd'属性具有“绝对移动（M）”和“绝对arcto（A）”命令，则pathSegList将具有一个SVG_PATHSEG_MOVETO_ABS条目，后跟一系列接近弧的SVG_PATHSEG_LINETO_ABS条目。这种替代表示可用于为将受益于更有限的命令集的开发人员提供更简单的界面。
唯一有效的SVGPathSeg类型是SVG_PATHSEG_MOVETO_ABS（M），SVG_PATHSEG_LINETO_ABS（L），SVG_PATHSEG_CURVETO_CUBIC_ABS（C）和SVG_PATHSEG_CLOSEPATH（z）。
animatedPathSegList （readonly SVGPathSegList）
提供对“d” 属性的当前动画内容的访问，其形式与SVG的语法一对一匹配。如果给定的属性或属性是动画的，则包含属性或属性的当前动画值，并且对象本身及其内容都是只读的。如果当前未对给定属性或属性进行动画处理，则包含与pathSegList相同的值。
animatedNormalizedPathSegList （readonly SVGPathSegList）
提供对“d”属性的当前动画内容的访问， 其中所有路径数据命令均以SVGPathSeg 类型的以下子集表示：SVG_PATHSEG_MOVETO_ABS（M），SVG_PATHSEG_LINETO_ABS（L），SVG_PATHSEG_CURVETO_CUBIC_ABS（C）和SVG_PATHSEG_CLOSEPATH（ Z）。如果给定的属性或属性是动画的，则包含属性或属性的当前动画值，并且对象本身及其内容都是只读的。如果当前未对给定属性或属性进行动画处理，则包含与normalizedPathSegList相同的值。
8.5.23接口SVGPathElement
所述SVGPathElement接口对应于“路径” 元件。
<span style="color:#000000">interface <strong>SVGPathElement</strong>：<a data-cke-saved-href="https://www.w3.org/TR/SVG11/types.html#InterfaceSVGElement" href="https://www.w3.org/TR/SVG11/types.html#InterfaceSVGElement" class="idlinterface">SVGElement</a>，
<a data-cke-saved-href="https://www.w3.org/TR/SVG11/types.html#InterfaceSVGTests" href="https://www.w3.org/TR/SVG11/types.html#InterfaceSVGTests" class="idlinterface">SVGTests</a>，
<a data-cke-saved-href="https://www.w3.org/TR/SVG11/types.html#InterfaceSVGLangSpace" href="https://www.w3.org/TR/SVG11/types.html#InterfaceSVGLangSpace" class="idlinterface">SVGLangSpace</a>，
<a data-cke-saved-href="https://www.w3.org/TR/SVG11/types.html#InterfaceSVGExternalResourcesRequired" href="https://www.w3.org/TR/SVG11/types.html#InterfaceSVGExternalResourcesRequired" class="idlinterface">SVGExternalResourcesRequired</a>，
<a data-cke-saved-href="https://www.w3.org/TR/SVG11/types.html#InterfaceSVGStylable" href="https://www.w3.org/TR/SVG11/types.html#InterfaceSVGStylable" class="idlinterface">SVGStylable</a>，
<a data-cke-saved-href="https://www.w3.org/TR/SVG11/types.html#InterfaceSVGTransformable" href="https://www.w3.org/TR/SVG11/types.html#InterfaceSVGTransformable" class="idlinterface">SVGTransformable</a>，
<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGAnimatedPathData" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGAnimatedPathData" class="idlinterface">SVGAnimatedPathData</a> {
readonly属性<a data-cke-saved-href="https://www.w3.org/TR/SVG11/types.html#InterfaceSVGAnimatedNumber" href="https://www.w3.org/TR/SVG11/types.html#InterfaceSVGAnimatedNumber" class="idlinterface">SVGAnimatedNumber </a> <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathElement__pathLength" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathElement__pathLength">pathLength</a> ;
float <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathElement__getTotalLength" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathElement__getTotalLength">getTotalLength</a>（）;
<a data-cke-saved-href="https://www.w3.org/TR/SVG11/coords.html#InterfaceSVGPoint" href="https://www.w3.org/TR/SVG11/coords.html#InterfaceSVGPoint" class="idlinterface">SVGPoint </a> <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathElement__getPointAtLength" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathElement__getPointAtLength">getPointAtLength</a>（浮动距离）;
unsigned long <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathElement__getPathSegAtLength" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathElement__getPathSegAtLength">getPathSegAtLength</a>（浮点距离）;
<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSegClosePath" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSegClosePath" class="idlinterface">SVGPathSegClosePath </a> <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathElement__createSVGPathSegClosePath" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathElement__createSVGPathSegClosePath">createSVGPathSegClosePath</a>（）;
<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSegMovetoAbs" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSegMovetoAbs" class="idlinterface">SVGPathSegMovetoAbs </a> <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathElement__createSVGPathSegMovetoAbs" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathElement__createSVGPathSegMovetoAbs">createSVGPathSegMovetoAbs</a>（在float x中，在float y中）;
<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSegMovetoRel" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSegMovetoRel" class="idlinterface">SVGPathSegMovetoRel </a> <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathElement__createSVGPathSegMovetoRel" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathElement__createSVGPathSegMovetoRel">createSVGPathSegMovetoRel</a>（在float x中，在float y中）;
<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSegLinetoAbs" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSegLinetoAbs" class="idlinterface">SVGPathSegLinetoAbs </a> <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathElement__createSVGPathSegLinetoAbs" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathElement__createSVGPathSegLinetoAbs">createSVGPathSegLinetoAbs</a>（在float x中，在float y中）;
<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSegLinetoRel" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSegLinetoRel" class="idlinterface">SVGPathSegLinetoRel </a> <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathElement__createSVGPathSegLinetoRel" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathElement__createSVGPathSegLinetoRel">createSVGPathSegLinetoRel</a>（在float x中，在float y中）;
<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSegCurvetoCubicAbs" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSegCurvetoCubicAbs" class="idlinterface">SVGPathSegCurvetoCubicAbs </a> <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathElement__createSVGPathSegCurvetoCubicAbs" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathElement__createSVGPathSegCurvetoCubicAbs">createSVGPathSegCurvetoCubicAbs</a>（在float x中，在float y中，在float x1中，在float y1中，在float x2中，在float y2中）;
<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSegCurvetoCubicRel" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSegCurvetoCubicRel" class="idlinterface">SVGPathSegCurvetoCubicRel</a> <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathElement__createSVGPathSegCurvetoCubicRel" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathElement__createSVGPathSegCurvetoCubicRel">createSVGPathSegCurvetoCubicRel</a>（在float x中，在float y中，在float x1中，在float y1中，在float x2中，在float y2中）;
<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSegCurvetoQuadraticAbs" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSegCurvetoQuadraticAbs" class="idlinterface">SVGPathSegCurvetoQuadraticAbs </a> <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathElement__createSVGPathSegCurvetoQuadraticAbs" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathElement__createSVGPathSegCurvetoQuadraticAbs">createSVGPathSegCurvetoQuadraticAbs</a>（在float x中，在float y中，在float x1中，在float y1中）;
<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSegCurvetoQuadraticRel" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSegCurvetoQuadraticRel" class="idlinterface">SVGPathSegCurvetoQuadraticRel </a> <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathElement__createSVGPathSegCurvetoQuadraticRel" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathElement__createSVGPathSegCurvetoQuadraticRel">createSVGPathSegCurvetoQuadraticRel</a>（在float x中，在float y中，在float x1中，在float y1中）;
<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSegArcAbs" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSegArcAbs" class="idlinterface">SVGPathSegArcAbs </a> <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathElement__createSVGPathSegArcAbs" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathElement__createSVGPathSegArcAbs">createSVGPathSegArcAbs</a>（在float x中，在float y中，在float r1中，在float r2中，在float角中，在boolean largeArcFlag中，在boolean sweepFlag中）;
<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSegArcRel" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSegArcRel" class="idlinterface">SVGPathSegArcRel </a> <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathElement__createSVGPathSegArcRel" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathElement__createSVGPathSegArcRel">createSVGPathSegArcRel</a>（在float x中，在float y中，在float r1中，在float r2中，在float角中，在boolean largeArcFlag中，在boolean sweepFlag中）;
<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSegLinetoHorizontalAbs" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSegLinetoHorizontalAbs" class="idlinterface">SVGPathSegLinetoHorizontalAbs </a> <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathElement__createSVGPathSegLinetoHorizontalAbs" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathElement__createSVGPathSegLinetoHorizontalAbs">createSVGPathSegLinetoHorizontalAbs</a>（在float x中）;
<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSegLinetoHorizontalRel" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSegLinetoHorizontalRel" class="idlinterface">SVGPathSegLinetoHorizontalRel </a> <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathElement__createSVGPathSegLinetoHorizontalRel" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathElement__createSVGPathSegLinetoHorizontalRel">createSVGPathSegLinetoHorizontalRel</a>（在float x中）;
<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSegLinetoVerticalAbs" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSegLinetoVerticalAbs" class="idlinterface">SVGPathSegLinetoVerticalAbs </a> <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathElement__createSVGPathSegLinetoVerticalAbs" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathElement__createSVGPathSegLinetoVerticalAbs">createSVGPathSegLinetoVerticalAbs</a>（在float y中）;
<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSegLinetoVerticalRel" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSegLinetoVerticalRel" class="idlinterface">SVGPathSegLinetoVerticalRel </a> <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathElement__createSVGPathSegLinetoVerticalRel" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathElement__createSVGPathSegLinetoVerticalRel">createSVGPathSegLinetoVerticalRel</a>（在float y中）;
<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSegCurvetoCubicSmoothAbs" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSegCurvetoCubicSmoothAbs" class="idlinterface">SVGPathSegCurvetoCubicSmoothAbs </a> <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathElement__createSVGPathSegCurvetoCubicSmoothAbs" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathElement__createSVGPathSegCurvetoCubicSmoothAbs">createSVGPathSegCurvetoCubicSmoothAbs</a>（在float x中，在float y中，在float x2中，在float y2中）;
<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSegCurvetoCubicSmoothRel" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSegCurvetoCubicSmoothRel" class="idlinterface">SVGPathSegCurvetoCubicSmoothRel </a> <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathElement__createSVGPathSegCurvetoCubicSmoothRel" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathElement__createSVGPathSegCurvetoCubicSmoothRel">createSVGPathSegCurvetoCubicSmoothRel</a>（在float x中，在float y中，在float x2中，在float y2中）;
<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSegCurvetoQuadraticSmoothAbs" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSegCurvetoQuadraticSmoothAbs" class="idlinterface">SVGPathSegCurvetoQuadraticSmoothAbs</a> <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathElement__createSVGPathSegCurvetoQuadraticSmoothAbs" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathElement__createSVGPathSegCurvetoQuadraticSmoothAbs">createSVGPathSegCurvetoQuadraticSmoothAbs</a>（在float x中，在float y中）;
<a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSegCurvetoQuadraticSmoothRel" href="https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSegCurvetoQuadraticSmoothRel" class="idlinterface">SVGPathSegCurvetoQuadraticSmoothRel </a> <a data-cke-saved-href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathElement__createSVGPathSegCurvetoQuadraticSmoothRel" href="https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathElement__createSVGPathSegCurvetoQuadraticSmoothRel">createSVGPathSegCurvetoQuadraticSmoothRel</a>（在float x中，在float y中）;
};</span>属性：
pathLength （只读SVGAnimatedNumber）
对应于给定'path' 元素的属性pathLength。
操作：
float getTotalLength（）
使用用户代理的沿路径距离算法返回用户代理的路径总长度的计算值，作为当前用户坐标系中的距离。
返回
路径的总长度。
SVGPoint getPointAtLength（浮动距离）
使用用户代理的沿路径距离算法 返回用户空间中的（x，y）坐标，该坐标是沿路径的距离单位。
参数
-
浮动距离
沿路径的距离，相对于路径的起点，作为当前用户坐标系中的距离。
返回
用户空间中返回的点。
unsigned long getPathSegAtLength（浮点距离）
使用用户代理的沿路径距离算法 将索引返回到pathSegList，该路径是沿路径的距离单位。
参数
-
浮动距离
沿路径的距离，相对于路径的起点，作为当前用户坐标系中的距离。
返回
路径段的索引，其中第一个路径段为数字0。
SVGPathSegClosePath createSVGPathSegClosePath（）
返回独立的无父SVGPathSegClosePath对象。
返回
独立的无父SVGPathSegClosePath对象。
SVGPathSegMovetoAbs createSVGPathSegMovetoAbs（在float x中，在float y中）
返回独立的无父SVGPathSegMovetoAbs对象。
参数
-
浮动x
此路径段结束点的绝对X坐标。
-
浮ÿ
此路径段结束点的绝对Y坐标。
返回
独立的无父SVGPathSegMovetoAbs对象。
SVGPathSegMovetoRel createSVGPathSegMovetoRel（在float x中，在float y中）
返回独立的无父SVGPathSegMovetoRel对象。
参数
-
浮动x
此路径段的结束点的相对X坐标。
-
浮ÿ
此路径段结束点的相对Y坐标。
返回
独立的无父SVGPathSegMovetoRel对象。
SVGPathSegLinetoAbs createSVGPathSegLinetoAbs（在float x中，在float y中）
返回独立的无父SVGPathSegLinetoAbs对象。
参数
-
浮动x
此路径段结束点的绝对X坐标。
-
浮ÿ
此路径段结束点的绝对Y坐标。
返回
独立的无父SVGPathSegLinetoAbs对象。
SVGPathSegLinetoRel createSVGPathSegLinetoRel（在float x中，在float y中）
返回独立的无父SVGPathSegLinetoRel对象。
参数
-
浮动x
此路径段的结束点的相对X坐标。
-
浮ÿ
此路径段结束点的相对Y坐标。
返回
独立的无父SVGPathSegLinetoRel对象。
SVGPathSegCurvetoCubicAbs createSVGPathSegCurvetoCubicAbs（在float x中，在float y中，在float x1中，在float y1中，在float x2中，在float y2中））
返回独立的无父SVGPathSegCurvetoCubicAbs对象。
参数
-
浮动x
此路径段结束点的绝对X坐标。
-
浮ÿ
此路径段结束点的绝对Y坐标。
-
浮点x1
第一个控制点的绝对X坐标。
-
漂浮y1
第一个控制点的绝对Y坐标。
-
浮动x2
第二个控制点的绝对X坐标。
-
漂浮y2
第二个控制点的绝对Y坐标。
返回
独立的无父SVGPathSegCurvetoCubicAbs对象。
SVGPathSegCurvetoCubicRel createSVGPathSegCurvetoCubicRel（在float x中，在float y中，在float x1中，在float y1中，在float x2中，在float y2中）
返回独立的无父SVGPathSegCurvetoCubicRel对象。
参数
-
浮动x
此路径段的结束点的相对X坐标。
-
浮ÿ
此路径段结束点的相对Y坐标。
-
浮点x1
第一个控制点的相对X坐标。
-
漂浮y1
第一个控制点的相对Y坐标。
-
浮动x2
第二个控制点的相对X坐标。
-
漂浮y2
第二个控制点的相对Y坐标。
返回
独立的无父SVGPathSegCurvetoCubicRel对象。
SVGPathSegCurvetoQuadraticAbs createSVGPathSegCurvetoQuadraticAbs（在float x中，在float y中，在float x1中，在float y1中）
返回独立的无父SVGPathSegCurvetoQuadraticAbs对象。
参数
-
浮动x
此路径段结束点的绝对X坐标。
-
浮ÿ
此路径段结束点的绝对Y坐标。
-
浮点x1
第一个控制点的绝对X坐标。
-
漂浮y1
第一个控制点的绝对Y坐标。
返回
一个独立的，无父的SVGPathSegCurvetoQuadraticAbs对象。
SVGPathSegCurvetoQuadraticRel createSVGPathSegCurvetoQuadraticRel（在float x中，在float y中，在float x1中，在float y1中）
返回独立的无父SVGPathSegCurvetoQuadraticRel对象。
参数
-
浮动x
此路径段的结束点的相对X坐标。
-
浮ÿ
此路径段结束点的相对Y坐标。
-
浮点x1
第一个控制点的相对X坐标。
-
漂浮y1
第一个控制点的相对Y坐标。
返回
独立的无父SVGPathSegCurvetoQuadraticRel对象。
SVGPathSegArcAbs createSVGPathSegArcAbs（在float x中，在float y中，在float r1中，在float r2中，在float 角中，在boolean largeArcFlag中，在boolean sweepFlag中）
返回独立的无父SVGPathSegArcAbs对象。
参数
-
浮动x
此路径段结束点的绝对X坐标。
-
浮ÿ
此路径段结束点的绝对Y坐标。
-
漂浮r1
椭圆的x轴半径（即r1）。
-
漂浮r2
椭圆的y轴半径（即r2）。
-
浮角
椭圆的x轴相对于用户坐标系的x轴的旋转角度（以度为单位）。
-
boolean largeArcFlag
large-arc-flag参数的值。
-
boolean sweepFlag
large-arc-flag参数的值。
返回
独立的无父SVGPathSegArcAbs对象。
SVGPathSegArcRel createSVGPathSegArcRel（在float x中，在float y中，在float r1中，在float r2中，在float 角中，在boolean largeArcFlag中，在boolean sweepFlag中））
返回独立的无父SVGPathSegArcRel对象。
参数
-
浮动x
此路径段的结束点的相对X坐标。
-
浮ÿ
此路径段结束点的相对Y坐标。
-
漂浮r1
椭圆的x轴半径（即r1）。
-
漂浮r2
椭圆的y轴半径（即r2）。
-
浮角
椭圆的x轴相对于用户坐标系的x轴的旋转角度（以度为单位）。
-
boolean largeArcFlag
large-arc-flag参数的值。
-
boolean sweepFlag
large-arc-flag参数的值。
返回
独立的无父SVGPathSegArcRel对象。
SVGPathSegLinetoHorizontalAbs createSVGPathSegLinetoHorizontalAbs（在float x中）
返回独立的无父SVGPathSegLinetoHorizontalAbs对象。
参数
-
浮动x
此路径段结束点的绝对X坐标。
返回
独立的无父SVGPathSegLinetoHorizontalAbs对象。
SVGPathSegLinetoHorizontalRel createSVGPathSegLinetoHorizontalRel（在float x中）
返回独立的无父SVGPathSegLinetoHorizontalRel对象。
参数
-
浮动x
此路径段的结束点的相对X坐标。
返回
独立的无父SVGPathSegLinetoHorizontalRel对象。
SVGPathSegLinetoVerticalAbs createSVGPathSegLinetoVerticalAbs（在float y中）
返回独立的无父SVGPathSegLinetoVerticalAbs对象。
参数
-
浮ÿ
此路径段结束点的绝对Y坐标。
返回
独立的无父SVGPathSegLinetoVerticalAbs对象。
SVGPathSegLinetoVerticalRel createSVGPathSegLinetoVerticalRel（在float y中）
返回独立的无父SVGPathSegLinetoVerticalRel对象。
参数
-
浮ÿ
此路径段结束点的相对Y坐标。
返回
独立的无父SVGPathSegLinetoVerticalRel对象。
SVGPathSegCurvetoCubicSmoothAbs createSVGPathSegCurvetoCubicSmoothAbs（在float x中，在float y中，在float x2中，在float y2中）
返回独立的无父SVGPathSegCurvetoCubicSmoothAbs对象。
参数
-
浮动x
此路径段结束点的绝对X坐标。
-
浮ÿ
此路径段结束点的绝对Y坐标。
-
浮动x2
第二个控制点的绝对X坐标。
-
漂浮y2
第二个控制点的绝对Y坐标。
返回
独立的无父SVGPathSegCurvetoCubicSmoothAbs对象。
SVGPathSegCurvetoCubicSmoothRel createSVGPathSegCurvetoCubicSmoothRel（在float x中，在float y中，在float x2中，在float y2中）
返回独立的无父SVGPathSegCurvetoCubicSmoothRel对象。
参数
-
浮动x
此路径段的结束点的相对X坐标。
-
浮ÿ
此路径段结束点的相对Y坐标。
-
浮动x2
第二个控制点的相对X坐标。
-
漂浮y2
第二个控制点的相对Y坐标。
返回
独立的无父SVGPathSegCurvetoCubicSmoothRel对象。
SVGPathSegCurvetoQuadraticSmoothAbs createSVGPathSegCurvetoQuadraticSmoothAbs（在float x中，在float y中）
返回独立的无父SVGPathSegCurvetoQuadraticSmoothAbs对象。
参数
-
浮动x
此路径段结束点的绝对X坐标。
-
浮ÿ
此路径段结束点的绝对Y坐标。
返回
一个独立的，无父的SVGPathSegCurvetoQuadraticSmoothAbs对象。
SVGPathSegCurvetoQuadraticSmoothRel createSVGPathSegCurvetoQuadraticSmoothRel（在float x中，在float y中）
返回独立的无父SVGPathSegCurvetoQuadraticSmoothRel对象。
参数
-
浮动x
此路径段的结束点的相对X坐标。
-
浮ÿ
此路径段结束点的相对Y坐标。
返回
一个独立的，无父的SVGPathSegCurvetoQuadraticSmoothRel对象。
最后，给大家推荐几款可以生成矢量路径的工具：
1. Illustrator CS6
以利用Ai软件生成铁轨的矢量路径为例。
第一步，绘制铁轨的矢量图。
第二步，点击：文件->存储为->保存类型选择SVG->点击保存->SVG代码
点击SVG代码，即可查看矢量路径了。
第三步，查看SVG代码。
d标签中的内容即为矢量路径了。
2.矢量路径在线生成工具：https://editor.method.ac/
此网站可以在线绘图并转为路径，不过操作起来并没有Illustrator CS6那么方便，推荐大家下载一个试用版的Illustrator CS6。
5271
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
