パスは、塗りつぶしやストロークが可能な図形の輪郭を表します。パスはクリッピングパスとして使ったり、アニメーションの記述やテキストの配置にも使えます。パスはこれらの機能を同時に複数兼ねることも可能です。（塗りつぶし、ストローク、ペイントサーバー、 クリッピングとマスキング、 アニメーション（'animateMotion'）、 パス上のテキスト参照。）
パスは「現在の点」という概念で記述されます。紙に描くことを例えると、現在の点はペンの位置と考えられます。ペンの位置を動かして、ペンを直線や曲線で引いて図形（開いた形・閉じた形）の輪郭をなぞることができます。
パスはオブジェクトの輪郭の幾何形状を表し、moveto（新しい現在の点の設定）、lineto（直線描画）、curveto（三次ベジエで曲線描画）、arc（楕円または円弧）、closepath（最後の moveto まで接続して現在の形状を閉じる）コマンドで定義されます。複合パス（複数サブパスを持つパス）も可能で、「ドーナツ型の穴」などの効果に使えます。
この章ではSVGパスの構文、挙動、DOMインターフェースについて説明します。SVGパスの実装ノートは‘path’ 要素実装ノートで参照できます。
パスはSVGでは ‘path’ 要素で定義されます。
基本図形は全て、その 等価なパスがどうなるか、つまりその図形がパスとしてどのような形かで記述されています。（‘path’ 要素の等価なパスは単にそのパス自体です。） 基本図形を等価なパスとして定義するために、 セグメント完了型クローズパス操作が定義されていますが、これは現行のパス構文では表現できません。
‘path’ 要素の図形輪郭は d プロパティで指定します。下記パスデータ参照。
パスは ‘path’ 要素を使い、その d プロパティでパスデータを指定することで定義されます。パスデータには moveto、lineto、curveto（三次・二次ベジエ両方）、arc、closepath 命令が含まれます。
Example triangle01 は三角形の形のパスを指定しています。（ M は moveto、 L は lineto、 z は closepath を示します）。
<?xml version="1.0" standalone="no"?>
<svg width="4cm" height="4cm" viewBox="0 0 400 400"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Example triangle01- simple example of a 'path'</title>
<desc>A path that draws a triangle</desc>
<rect x="1" y="1" width="398" height="398"
fill="none" stroke="blue" />
<path d="M 100 100 L 300 100 L 200 300 z"
fill="red" stroke="blue" stroke-width="3" />
</svg>
Example triangle01
パスデータには改行文字を含めることができ、可読性向上のため複数行に分割可能です。 マークアップ内の属性中の改行は、パース時に空白文字として正規化されます。
パスデータの構文は、ファイルサイズを最小限に抑え効率的なダウンロードを可能にするため簡潔に設計されています。多くのSVGファイルではパスデータが主要部分を占めるためです。SVGではパスデータを小さくするため、以下のような工夫があります：
M 100 100 L 200 200M100 100L200 200M 100 200 L 200 100 L -100 -200M 100 200 L 200 100 -100 -200パスデータの構文は前置記法（コマンド＋パラメータ）です。許可される小数点は Unicode U+0046 FULL STOP（"."）のみ（UnicodeではPERIOD、ドット、小数点とも呼ばれる）で、他の区切り文字は許可されません[UNICODE]。 （例："13,000.56" は無効な数値、正しくは "13000.56" と記述してください。）
コマンドの相対バージョンでは、すべての座標値はコマンド開始時点の現在の点からの相対値です。
下記の表では、各パスコマンドの構文記述に以下の記号を使っています：
パスコマンドの説明で、cpx・cpyは現在の点の座標を表します。
| 名前： | d |
|---|---|
| 値： | none | <string> |
| 初期値： | none |
| 適用対象： | ‘path’ |
| 継承： | いいえ |
| パーセンテージ： | N/A |
| メディア： | visual |
| 算出値： | 指定通り |
| アニメーション可能： | はい |
none の値は、その要素にパスデータがないことを示します。‘path’ 要素の場合、レンダリングや祖先 コンテナ要素のバウンディングボックスに寄与しません。
パスは複数のセグメントで構成され、movetoやclosepath以外の全てのコマンド（明示・暗黙）は1つの パスセグメント を定義します。
パスデータ内の全ての座標や長さは、現行ユーザー座標系のユーザー単位として扱われます。
<string> の値は、パスデータ文字列で形状を指定します。<string> の内容は下記svg-path EBNF文法に一致する必要があり、文字列内のエラーはパスデータのエラー処理のルールで処理されます。 パスデータ文字列に有効なコマンドがなければ、挙動は none と同じです。
アニメーションの場合、2つの d プロパティ値は、パスデータ文字列が同じ構造（コマンド数・種類・順序が完全一致）の場合のみ滑らかに補間できます。一致しない場合は、 補間 は 離散 アニメーション型で行います。
パスデータコマンドリストが同じ構造の場合、各コマンドの各パラメータは 補間 により 実数として個別に補間されます。フラグやブール値は0～1の間で補間され、0以外は1/trueとみなします。
「dはパスデータ文字列を値とするプレゼンテーション属性（名称変更なし）になる」と ロンドン編集者会議で決定。
以下のセクションでは、パスデータ文字列で利用できるコマンドを一覧します。直線セグメントを描画するのは linetoコマンド (L, l, H, h, V, v) と closepathコマンド (Z, z) です。下記3グループのコマンドが曲線を描画します：
「moveto」コマンド（M または m）は新しい 初期点と新しい現在の点を確立します。効果は「ペンを持ち上げて新しい位置に移動する」ようなものです。パスデータセグメント（ある場合）は必ず「moveto」コマンドで始まります。以降の「moveto」コマンド（最初でない場合）は新しい サブパスの開始を表します：
| コマンド | 名称 | パラメータ | 説明 |
|---|---|---|---|
| M（絶対） m（相対） |
moveto | (x y)+ | 指定した (x,y) 座標で新しいサブパスを開始します。 M（大文字）は絶対座標が続くことを示し、m（小文字）は相対座標が続くことを示します。movetoの後に複数の座標ペアが続く場合、後続のペアは暗黙のlineto命令とみなされます。したがって、暗黙のlineto命令はmovetoが相対なら相対、絶対なら絶対となります。パスの最初の要素として相対moveto（m）が現れた場合は絶対座標ペアとして扱われます。この場合、以降の座標ペアは相対扱いになりますが、最初のmoveto自体は絶対扱いです。 |
相対 m コマンドの場合、移動先は (cpx + x, cpy + y) です。
「closepath」（Z または z）は、現在のサブパスを初期点に戻して接続し終了します。 自動的に直線が現在の点からサブパスの初期点まで描かれます。このパスセグメントはゼロ長の場合もあります。
「closepath」の直後に「moveto」が続く場合、その「moveto」が次のサブパスの開始点となります。 「closepath」の直後に他のコマンドが続く場合、次のサブパスは現在のサブパスと同じ初期点から開始します。
サブパスが「closepath」で終わる場合、‘stroke-linejoin’や‘stroke-linecap’の実装方法により、手動で「lineto」で閉じた場合と挙動が異なります。「closepath」ではサブパスの最後のセグメントと最初のセグメントの開始点が、現行の‘stroke-linejoin’値で「結合」されます。手動で「lineto」で閉じた場合、最初と最後のセグメントは結合されず、それぞれ現行の‘stroke-linecap’値でキャップ処理されます。 コマンド終了時、新しい現在の点は現在サブパスの初期点となります。
| コマンド | 名称 | パラメータ | 説明 |
|---|---|---|---|
| Z または z |
closepath | (なし) | 現在のサブパスを現在のサブパスの初期点に戻して接続し閉じる（上記本文参照）。 Zとzはパラメータを取らないため、効果は同一です。 |
閉じたサブパスは「closepath」コマンドで閉じる必要があり、これにより最初と最後のパスセグメントが結合されます。 その他のパスは開いたサブパスです。
閉じたサブパスは、終点座標が初期点である開いたサブパスとは動作が異なります。 開いたサブパスの最初と最後のパスセグメントは結合されません。最後のパスセグメントの座標がサブパスの初期点であっても、最初と最後のパスセグメントは現行のstroke-linecap値でキャップ処理され、stroke-linejoinで結合されません。
「closepath」の直後に「moveto」が続く場合、その「moveto」が次のサブパスの開始点となります。「closepath」の直後に他のコマンドが続く場合、次のサブパスは現在サブパスと同じ初期点から開始します。
基本図形を等価なパスとして表現するためには、ゼロ長の直線セグメントを追加せず（仮にそのセグメントがゼロ長でも）、曲線形状を閉じる方法が必要です。 そのため、ここではセグメント完了型クローズパス操作を定義します。
セグメント完了型クローズパス操作は前のパスコマンドと合成され、2つの効果があります：
セグメント完了型クローズパス操作は現時点ではパスデータ構文のコマンドとしてはサポートされていません。 ワーキンググループは将来の仕様でその構文を提案しています。
各種「lineto」コマンドは現在の点から新しい点まで直線を描画します：
| コマンド | 名称 | パラメータ | 説明 |
|---|---|---|---|
| L（絶対） l（相対） |
lineto | (x y)+ | 現在の点から指定した (x,y) 座標まで線を描き、新しい現在の点となります。 L（大文字）は絶対座標、l（小文字）は相対座標が続きます。座標ペアを複数指定すればポリラインを描画できます。コマンドの終了時、新しい現在の点は最後に指定した座標値となります。 |
| H（絶対） h（相対） |
horizontal lineto | x+ | 現在の点から水平線を描画します。 H（大文字）は絶対座標、h（小文字）は相対座標が続きます。x値を複数指定可能（通常は意味がないことが多い）。Hまたはhは、y座標を0指定したLまたはlと同等です。コマンド終了時、新しい現在の点は最後の座標値となります。 |
| V（絶対） v（相対） |
vertical lineto | y+ | 現在の点から垂直線を描画します。 V（大文字）は絶対座標、v（小文字）は相対座標が続きます。y値を複数指定可能（通常は意味がないことが多い）。Vまたはvは、x座標を0指定したLまたはlと同等です。コマンド終了時、新しい現在の点は最後の座標値となります。 |
相対 l コマンドの場合、線の終点は (cpx + x, cpy + y) です。
相対 h コマンドの場合、線の終点は (cpx + x, cpy) です。つまり h コマンドで x が正なら正のx軸方向に水平線が描かれます。
相対 v コマンドの場合、線の終点は (cpx, cpy + y) です。
三次ベジエコマンドは以下の通りです：
| コマンド | 名称 | パラメータ | 説明 |
|---|---|---|---|
| C（絶対） c（相対） |
curveto | (x1 y1 x2 y2 x y)+ | 現在の点から (x,y) まで三次ベジエ曲線を描きます。(x1,y1) を曲線始点側の制御点、(x2,y2) を曲線終点側の制御点とします。 C（大文字）は絶対座標、c（小文字）は相対座標が続きます。複数座標セット指定でポリベジエが描画できます。コマンド終了時、新しい現在の点は最後に指定した (x,y) 座標ペアとなります。 |
| S（絶対） s（相対） |
shorthand/smooth curveto | (x2 y2 x y)+ | 現在の点から (x,y) まで三次ベジエ曲線を描きます。最初の制御点は、前コマンドの2番目の制御点を現在の点を基準に反転した位置とみなします。（前コマンドがない場合、または C, c, S, s 以外の場合は、最初の制御点は現在の点と一致するものとします。）(x2,y2) が2番目の制御点（曲線終点側の制御点）です。 S（大文字）は絶対座標、s（小文字）は相対座標が続きます。複数座標セット指定でポリベジエが描画できます。コマンド終了時、新しい現在の点は最後の (x,y) 座標ペアとなります。 |
相対 c または s コマンドの場合、各座標ペアは m コマンド同様に計算します。 例えば両コマンドの曲線の終端制御点は (cpx + x, cpy + y) です。
Example cubic01 はパス内で三次ベジエコマンドを使った簡単な例を示します。 この例では内部CSSスタイルシートでスタイリングプロパティを指定しています。 "S" コマンドの制御点は、前の "C" コマンドの制御点を "S" コマンド開始点を基準に反転した位置として自動計算されることに注意してください。
<?xml version="1.0" standalone="no"?>
<svg width="5cm" height="4cm" viewBox="0 0 500 400"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Example cubic01- cubic Bézier commands in path data</title>
<desc>Picture showing a simple example of path data
using both a "C" and an "S" command,
along with annotations showing the control points
and end points</desc>
<style type="text/css"><![CDATA[
.Border { fill:none; stroke:blue; stroke-width:1 }
.Connect { fill:none; stroke:#888888; stroke-width:2 }
.SamplePath { fill:none; stroke:red; stroke-width:5 }
.EndPoint { fill:none; stroke:#888888; stroke-width:2 }
.CtlPoint { fill:#888888; stroke:none }
.AutoCtlPoint { fill:none; stroke:blue; stroke-width:4 }
.Label { font-size:22; font-family:Verdana }
]]></style>
<rect class="Border" x="1" y="1" width="498" height="398" />
<polyline class="Connect" points="100,200 100,100" />
<polyline class="Connect" points="250,100 250,200" />
<polyline class="Connect" points="250,200 250,300" />
<polyline class="Connect" points="400,300 400,200" />
<path class="SamplePath" d="M100,200 C100,100 250,100 250,200
S400,300 400,200" />
<circle class="EndPoint" cx="100" cy="200" r="10" />
<circle class="EndPoint" cx="250" cy="200" r="10" />
<circle class="EndPoint" cx="400" cy="200" r="10" />
<circle class="CtlPoint" cx="100" cy="100" r="10" />
<circle class="CtlPoint" cx="250" cy="100" r="10" />
<circle class="CtlPoint" cx="400" cy="300" r="10" />
<circle class="AutoCtlPoint" cx="250" cy="300" r="9" />
<text class="Label" x="25" y="70">M100,200 C100,100 250,100 250,200</text>
<text class="Label" x="325" y="350"
style="text-anchor:middle">S400,300 400,200</text>
</svg>
Example cubic01
下記の図は、三次ベジエ曲線が制御点の位置によってどのように形状が変化するかを示します。最初の5つの例は単一の三次ベジエパスセグメントを示し、右下の例は "C" コマンドの後に "S" コマンドが続くものです。
二次ベジエコマンドは以下の通りです：
| コマンド | 名称 | パラメータ | 説明 |
|---|---|---|---|
| Q（絶対） q（相対） |
二次ベジエ曲線描画 | (x1 y1 x y)+ | 現在の点から (x,y) まで、(x1,y1) を制御点として二次ベジエ曲線を描きます。 Q（大文字）は絶対座標、q（小文字）は相対座標が続きます。複数座標セット指定でポリベジエが描画できます。コマンド終了時、新しい現在の点は最後の (x,y) 座標ペアとなります。 |
| T（絶対） t（相対） |
短縮/スムース二次ベジエ曲線描画 | (x y)+ | 現在の点から (x,y) まで二次ベジエ曲線を描きます。制御点は前コマンドの制御点を現在の点基準で反転した位置とみなします。（前コマンドがない場合、または Q, q, T, t 以外の場合は、制御点は現在の点と一致するとみなします。）T（大文字）は絶対座標、t（小文字）は相対座標が続きます。コマンド終了時、新しい現在の点は最後の (x,y) 座標ペアとなります。 |
相対 q または t コマンドの場合、各座標ペアは m コマンド同様に計算します。 例えば両コマンドの曲線終端制御点は (cpx + x, cpy + y) です。
Example quad01 はパス内で二次ベジエコマンドを使った簡単な例を示します。 "T" コマンドの制御点は、前の "Q" コマンドの制御点を "T" コマンド開始点基準で反転した位置として自動計算されることに注意してください。
<?xml version="1.0" standalone="no"?>
<svg width="12cm" height="6cm" viewBox="0 0 1200 600"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Example quad01 - quadratic Bézier commands in path data</title>
<desc>Picture showing a "Q" a "T" command,
along with annotations showing the control points
and end points</desc>
<rect x="1" y="1" width="1198" height="598"
fill="none" stroke="blue" stroke-width="1" />
<path d="M200,300 Q400,50 600,300 T1000,300"
fill="none" stroke="red" stroke-width="5" />
<!-- End points -->
<g fill="black" >
<circle cx="200" cy="300" r="10"/>
<circle cx="600" cy="300" r="10"/>
<circle cx="1000" cy="300" r="10"/>
</g>
<!-- Control points and lines from end points to control points -->
<g fill="#888888" >
<circle cx="400" cy="50" r="10"/>
<circle cx="800" cy="550" r="10"/>
</g>
<path d="M200,300 L400,50 L600,300
L800,550 L1000,300"
fill="none" stroke="#888888" stroke-width="2" />
</svg>
Example quad01
| SVG 2 要件： | SVGパス構文で円弧描画をより簡単にする。 |
|---|---|
| 決定： | パスで円弧描画を容易にする。 |
| 目的： | 著者が手作業で円弧を含むパスデータを書きやすくするため。 |
| 担当： | Cameron (ACTION-3151) |
楕円弧コマンドは以下の通りです：
| コマンド | 名称 | パラメータ | 説明 |
|---|---|---|---|
| A（絶対） a（相対） |
楕円弧 | (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+ | 現在の点から (x, y) まで楕円弧を描画します。楕円全体のサイズと向きは2つの半径（rx, ry）と x-axis-rotation（楕円全体の回転角度、現行座標系基準）で定義されます。楕円の中心 (cx, cy) は他のパラメータの制約条件を満たすよう自動計算されます。large-arc-flag と sweep-flag は自動計算に影響し、円弧の描画方法を決定します。 |
相対 a コマンドの場合、円弧の終点は (cpx + x, cpy + y) です。
Example arcs01 はパス内で円弧コマンドを使った簡単な例を示します。
<?xml version="1.0" standalone="no"?>
<svg width="12cm" height="5.25cm" viewBox="0 0 1200 400"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Example arcs01 - arc commands in path data</title>
<desc>Picture of a pie chart with two pie wedges and
a picture of a line with arc blips</desc>
<rect x="1" y="1" width="1198" height="398"
fill="none" stroke="blue" stroke-width="1" />
<path d="M300,200 h-150 a150,150 0 1,0 150,-150 z"
fill="red" stroke="blue" stroke-width="5" />
<path d="M275,175 v-150 a150,150 0 0,0 -150,150 z"
fill="yellow" stroke="blue" stroke-width="5" />
<path d="M600,350 l 50,-25
a25,25 -30 0,1 50,-25 l 50,-25
a25,50 -30 0,1 50,-25 l 50,-25
a25,75 -30 0,1 50,-25 l 50,-25
a25,100 -30 0,1 50,-25 l 50,-25"
fill="none" stroke="red" stroke-width="5" />
</svg>
Example arcs01
楕円弧コマンドは下記の制約条件を満たす楕円の一部を描画します：
多くのケースでは、これらの制約を満たす円弧は実際には4種類（2つの楕円×2種類の弧）存在します。large-arc-flag と sweep-flag は描画する円弧を次のように選択します：
下記は large-arc-flag と sweep-flag の4つの組み合わせごとに描画される円弧を示します。各ケースは次のパスデータコマンドで描画します：
<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" に置き換えて4つのケースを生成します。
パスデータ楕円弧コマンドの詳細な実装ノートは 範囲外楕円弧パラメータ のセクションを参照してください。
実装ノート付録には、SVGアーク表記を中心点・弧角度方式に変換する必要があるソフトウェア向けの関連式が記載されています。
SVGパスデータは以下のEBNF文法に一致します。
svg_path::= wsp* moveto? (moveto drawto_command*)?
drawto_command::=
moveto
| closepath
| lineto
| horizontal_lineto
| vertical_lineto
| curveto
| smooth_curveto
| quadratic_bezier_curveto
| smooth_quadratic_bezier_curveto
| elliptical_arc
moveto::=
( "M" | "m" ) wsp* coordinate_pair_sequence
closepath::=
("Z" | "z")
lineto::=
("L"|"l") wsp* coordinate_pair_sequence
horizontal_lineto::=
("H"|"h") wsp* coordinate_sequence
vertical_lineto::=
("V"|"v") wsp* coordinate_sequence
curveto::=
("C"|"c") wsp* curveto_coordinate_sequence
curveto_coordinate_sequence::=
coordinate_pair_triplet
| (coordinate_pair_triplet comma_wsp? curveto_coordinate_sequence)
smooth_curveto::=
("S"|"s") wsp* smooth_curveto_coordinate_sequence
smooth_curveto_coordinate_sequence::=
coordinate_pair_double
| (coordinate_pair_double comma_wsp? smooth_curveto_coordinate_sequence)
quadratic_bezier_curveto::=
("Q"|"q") wsp* quadratic_bezier_curveto_coordinate_sequence
quadratic_bezier_curveto_coordinate_sequence::=
coordinate_pair_double
| (coordinate_pair_double comma_wsp? quadratic_bezier_curveto_coordinate_sequence)
smooth_quadratic_bezier_curveto::=
("T"|"t") wsp* coordinate_pair_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::=
number comma_wsp? number comma_wsp? number comma_wsp
flag comma_wsp? flag comma_wsp? coordinate_pair
coordinate_pair_double::=
coordinate_pair comma_wsp? coordinate_pair
coordinate_pair_triplet::=
coordinate_pair comma_wsp? coordinate_pair comma_wsp? coordinate_pair
coordinate_pair_sequence::=
coordinate_pair | (coordinate_pair comma_wsp? coordinate_pair_sequence)
coordinate_sequence::=
coordinate | (coordinate comma_wsp? coordinate_sequence)
coordinate_pair::= coordinate comma_wsp? coordinate
coordinate::= sign? number
sign::= "+"|"-"
number ::= ([0-9])+
flag::=("0"|"1")
comma_wsp::=(wsp+ ","? wsp*) | ("," wsp*)
wsp ::= (#x9 | #x20 | #xA | #xC | #xD)
EBNFの処理では、与えられたEBNF生成式を可能な限り消費し、満たさない文字に遭遇した時点で停止します。例えば "M 100-200" の場合、"moveto" の最初の座標は "100" を消費し、生成式上で数字の後にマイナス記号は許されないため、そこで停止します。結果として最初の座標は "100"、2番目は "-200" となります。
同様に、"M 0.6.5" の場合は、"moveto" の最初の座標が "0.6" を消費し、2つ目の小数点に遭遇した時点で停止します。生成式上、座標は小数点1つしか許されないためです。結果として最初の座標は "0.6"、2番目は ".5" となります。
EBNFでは、d プロパティのパスデータ文字列が空でも許容されます。これはエラーではなく、そのパスの描画を無効化します。 d プロパティの値が none の場合も描画は無効化されます。
文法に一致しないパスデータが見つかった場合、そのパスデータはエラーです（エラー処理参照）。
一部の機能、例えば マーカーの向きや線端形状は、パス上のある距離、または各セグメントの開始・終了時のパスの方向によって定義されます。
指定距離におけるパスの方向は、次のように定義されます：
パスセグメントの開始方向は次の通り定義されます：
パスセグメントの終了方向は次の通り定義されます：
現行標準SVGユーザーエージェントは、パスデータを利用する機能を以下の詳細に従って実装しなければなりません：
すべての楕円弧パラメータ（ブール値フラグ以外）は任意の数値を許容しますが、ユーザーエージェントは曲線描画や幾何計算時に無効値に対し次の修正を行う必要があります：
セグメントの終点 (x, y) が現在の点（例えば前セグメントの終点）と一致する場合、楕円弧セグメントは完全に省略されたものとみなします。
rx または ry のいずれかが0の場合、この弧は両端を結ぶ直線セグメント（"lineto"）として扱います。
rx または ry が負の場合、符号を外し絶対値を使用します。
rx、ry、x-axis-rotation の値で解が存在しない場合（楕円が現在の点から新しい終点まで届かない場合）、楕円を一様に拡大し、解が1つだけ得られるまで（楕円がちょうど届くまで）拡大します。
この拡大操作の数式は付録範囲外半径の補正参照。
この寛容かつ一貫した範囲外値の扱いにより、以下が保証されます：
S/s および T/t コマンドは、与えられた三次ベジエセグメントの最初の制御点を、前のパスセグメントの終端制御点を現在の点基準で反転して算出することを示します。正確な計算式は以下の通りです。
現在の点が (curx, cury) で、前のパスセグメントの終端制御点が (oldx2, oldy2) の場合、反転点（すなわち (newx1, newy1)、現在のパスセグメントの最初の制御点）は：
(newx1, newy1) = (curx - (oldx2 - curx), cury - (oldy2 - cury))
= (2*curx - oldx2, 2*cury - oldy2)
ゼロ長のパスセグメントは無効ではありませんが、次の場合に描画へ影響します：
パス上のテキストやモーションアニメーション、 各種ストローク操作などの処理では、ユーザーエージェントが ‘path’ などのグラフィック要素の幾何に沿った距離を計算する必要があります。
パス上の距離を計算する正確な数学式は存在しますが、式は非常に複雑で多大な計算が必要です。オーサリングツールやユーザーエージェントはできるだけ精度の高いアルゴリズムを使うことが推奨されますが、実装差への対応や距離計算の結果が著者意図に近づくようにするために、‘pathLength’ 属性でパス全体の長さを著者が指定でき、ユーザーエージェントは ‘pathLength’ の値と自身が計算したパス長の比率でパス上の距離計算をスケーリングできます。
‘path’ 要素内の「moveto」操作は0長と定義されます。実際のパス長計算には「lineto」「curveto」「arcto」命令のみが寄与します。
| 名前 | 値 | 初期値 | アニメーション可能 |
|---|---|---|---|
| pathLength | <number> | (なし) | はい |
パス全体の長さをユーザー単位で著者が計算した値です。この値はユーザーエージェントの パス上の距離計算を著者の値で較正するために使用されます。ユーザーエージェントは ‘pathLength’ の値と自身が計算したパス長の比率で 全てのパス上の距離計算をスケーリングします。‘pathLength’ は パス上のテキスト、 モーションアニメーション、 各種ストローク操作の計算に影響します。
0の値も有効で、無限大のスケーリング係数として扱われます。0を無限大でスケーリングしても0のままですが、0より大きい非パーセンテージ値は +Infinity になります。
負の値はエラーです（エラー処理参照）。
‘pathLength’ は パーセンテージによる パス上の距離計算には効果がありません。
SVGPathElement オブジェクトは、DOM内の ‘path’ を表します。
[Exposed=Window] interface SVGPathElement : SVGGeometryElement { };