~THIS_PAGEは、~W3Cにより編集者草案として公開された SVG 2 仕様 の § Path を日本語に翻訳したものです。 ~PUB

9. パス — Path

9.1. 序論

~pathは、~fillしたり~strokeできるような図形の外形線を表現する。 ~pathは［ 切抜き~path ／ ~animationを述べるもの ／ ~textを位置するもの ］としても利用できる。 ~pathは、これらの機能のうち複数に同時に利用できる（ `§ ~fill法, ~stroke法, 塗り~server＠~SVGpainting$, `§ 切抜きと~masking＠~SVGrender#ClippingAndMasking$, ~animation （ `animateMotion$e ）, `§ ~path上の~text＠~SVGtext#TextLayoutPath$ を見よ）。 ◎ A path represents the outline of a shape which can be filled or stroked. A path can also be used as a clipping path, to describe animation, or position text. A path can be used for more than one of these functions at the same time. (See Filling, Stroking and Paint Servers, Clipping and Masking, Animation ('animateMotion'), and Text on a Path.)

~pathは、現在の点の概念を利用して述べられる。 紙に描くことに喩えるなら、 現在の点は，~penの所在と捉えられる。 ~penの位置は変更でき、 ~penを引きずることで図形の（開な／閉な）外形線を直線にも曲線にもナゾれる。 ◎ A path is described using the concept of a current point. In an analogy with drawing on paper, the current point can be thought of as the location of the pen. The position of the pen can be changed, and the outline of a shape (open or closed) can be traced by dragging the pen in either straight lines or curves.

~pathは、~objの外形線を成す幾何を表現し，次に挙げる~commandからなる用語で定義される ⇒＃ `~moveto$pC（新たな現在の点を設定する）, `~lineto$pC, `三次~Bezier~curveto$pC, `二次~Bezier~curveto$pC, `~arcto$pC, `~closepath$pC （最後の `~moveto$pC ~commandの`初期~点$へ接続して現在の図形を閉じる）。 ◎ Paths represent the geometry of the outline of an object, defined in terms of moveto (set a new current point), lineto (draw a straight line), curveto (draw a curve using a cubic Bézier), arc (elliptical or circular arc) and closepath (close the current shape by connecting to the last moveto) commands.＼

複合-~path（すなわち，複数の下位pathからなる~path）もアリであり、 ~obj内の “~donut-hole” のような効果を許容する。 ◎ Compound paths (i.e., a path with multiple subpaths) are possible to allow effects such as "donut holes" in objects.

この章は、~SVG~path用の［ 構文, 挙動, ~DOM~interface ］を述べる。 ~SVG~path用の様々な実装~注記は、 `path^e 要素~実装~注記 に見出せる。 ◎ This chapter describes the syntax, behavior and DOM interfaces for SVG paths. Various implementation notes for SVG paths can be found in ‘path’ element implementation Notes.

~pathは、~SVGにおいては `path$e 要素を利用して定義される。 ◎ A path is defined in SVG using the ‘path’ element.

すべての`基本~図形$は、それに `等価な~path@ は何か — すなわち，それらの図形は~pathとしては何であるか — の用語で述べられる （ `path$e 要素に等価な~pathは、単純に~path自身になる）。 基本~図形を等価な~pathとして定義するため、 `区分を完了して~pathを閉じる$ 演算が定義される — それは、現時点では，基本的な~path構文においては表現できない。 ◎ The basic shapes are all described in terms of what their equivalent path is, which is what their shape is as a path. (The equivalent path of a ‘path’ element is simply the path itself.) In order to define the basic shapes as equivalent paths, a segment-completing close path operation is defined, which cannot currently be represented in the basic path syntax.

9.2. `path^e 要素

◎要素名 `path@e ◎分類 `~graphics要素$, `描画-可能な要素$, `図形~要素$ ◎内容 任意個数, 任意順序の，次に挙げる要素 ⇒＃ `~animation要素$, `記述的~要素$, `塗り~server要素$, `clipPath$e, `marker$e, `mask$e, `script$e, `style$e ◎属性 `~ARIA属性$, `条件付き処理~属性$, `中核~属性$, `大域~event属性$, `文書~要素~event属性$, `呈示~属性$, `pathLength$a ◎幾何 `d$p ◎界面 `SVGPathElement$I ◎表終

`path$e 要素~用の図形の外形線は、 `d$p ~propを利用して指定される。 `§ ~path~data＠#PathData$を見よ。 ◎ The outline of a shape for a ‘path’ element is specified using the d property. See Path data below.

9.3. ~path~data

9.3.1. ~path~dataについての一般~情報

~pathは、 `path$e 要素を含めることにより定義される — その `d$p ~propが~path~dataを指定する。 ~path~dataは、次に挙げる~instructionを包含する ⇒＃ `~moveto$pC, `~lineto$pC, `三次~Bezier~curveto$pC, `二次~Bezier~curveto$pC, `~arcto$pC, `~closepath$pC ◎ A path is defined by including a ‘path’ element on which the d property specifies the path data. The path data contains the moveto, lineto, curveto (both cubic and quadratic Béziers), arc and closepath instructions.

例 `triangle01^xl： 三角形を成す図形における~pathを指定する。 （ `M^pc は `~moveto$pC, `L^pc は `~lineto$pC, `z^pc は `~closepath$pC を指示する）。 ◎ Example triangle01 specifies a path in the shape of a triangle. (The M indicates a moveto, the Ls indicate linetos, and the z indicates a closepath). 

<?xml version="1.0" standalone="no"?>
<svg width="4cm" height="4cm" viewBox="0 0 400 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <title>
例 `triangle01^xl
— 単純な `path^e の例
◎
Example triangle01- simple example of a 'path'
</title>
  <desc>
三角形を描く~path
◎
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>
例 `triangle01^xl ◎ Example triangle01
`paths/triangle01.svg^viewAs

~path~dataは，改行~文字を包含でき、 複数~行lに分断して可読性を向上できる。 ~markup内の属性の内側にある各~改行は、 構文解析の間に~space文字に正規化されることになる。 ◎ Path data can contain newline characters and thus can be broken up into multiple lines to improve readability. Newlines inside attributes in markup will be normalized to space characters while parsing.

~path~dataの構文は、 ~file~sizeを極力抑えて~downloadを効率的にするため，簡潔にされている — 多くの~SVG~fileでは、~path~dataが支配的なので。 ~SVGでは、次のような仕方で~path~dataの~sizeを最小~化しようと試みている： ◎ The syntax of path data is concise in order to allow for minimal file size and efficient downloads, since many SVG files will be dominated by their path data. Some of the ways that SVG attempts to minimize the size of path data are as follows:

  • すべての~instructionは、 1 個の文字として表出される（例： `~moveto$pC は `M^pc として表出される）。 ◎ All instructions are expressed as one character (e.g., a moveto is expressed as an M).
  • 余分な空白や分離子（~commaなど）は、排されてもヨイ — 一例として、 次の (1) は不必要な~spaceを包含するので， もっと密に (2) のように表出されてもヨイ ⇒＃ (1) `M 100 100 L 200 200^pc (2) `M100 100L200 200^pc ◎ Superfluous white space and separators (such as commas) may be eliminated; for instance, the following contains unnecessary spaces: • M 100 100 L 200 200 ◎ It may be expressed more compactly as: • M100 100L200 200
  • ~command~~文字は それに先行する~command~~文字に一致するならば排されてもヨイ — 一例として、 次の (1) が包含する 2 個目の `L^pc ~commandは不必要なので， もっと密に (2) のように表出されてヨイ ⇒＃ (1) `M 100 200 L 200 100 L -100 -200^pc (2) `M 100 200 L 200 100 -100 -200^pc ◎ A command letter may be eliminated if an identical command letter would otherwise precede it; for instance, the following contains an unnecessary second "L" command: • M 100 200 L 200 100 L -100 -200 ◎ It may be expressed more compactly as: • M 100 200 L 200 100 -100 -200
  • ほとんどの~commandは、 絶対~versionと相対~versionが可用にされている （大文字は絶対~座標を意味し，小文字は相対~座標を意味する）。 ◎ For most commands there are absolute and relative versions available (uppercase means absolute coordinates, lowercase means relative coordinates).
  • `~lineto$pC においては、 線が［ 水平／垂直 ］になる特別な事例を最適化するための， 代替-形も可用にされている（絶対, 相対 両用に）。 ◎ Alternate forms of lineto are available to optimize the special cases of horizontal and vertical lines (absolute and relative).
  • `~curveto$pC においては、［ 現在の区分~上の一部の制御-点を直前の区分~上の制御-点から自動的に決定できる ］ような特別な事例を最適化するための，代替-形も可用にされている。 ◎ Alternate forms of curve are available to optimize the special cases where some of the control points on the current segment can be determined automatically from the control points on the previous segment.

~path~dataの構文には、接頭辞~記法が用いられる （すなわち、~commandに~parameterが後続する）。 小数点に許容されるのは ~Unicode `002E^U FULL STOP （`.^l）文字に限られ，他の区切子~文字は許容されない。 `UNICODE$r （例えば数量-値 `13,000.56^l は，~path~data~stream内では妥当でないので、 代わりに `13000.56^l と記すこと。） ◎ The path data syntax is a prefix notation (i.e., commands followed by parameters). The only allowable decimal point is a Unicode U+002E FULL STOP (".") character (also referred to in Unicode as PERIOD, dot and decimal point) and no other delimiter characters are allowed [UNICODE]. (For example, the following is an invalid numeric value in a path data stream: "13,000.56". Instead, say: "13000.56".)

各種~commandの相対~versionに対しては、 すべての座標~値は，~commandの開始-時における現在の点に相対的になる。 ◎ For the relative versions of the commands, all coordinate values are relative to the current point at the start of the command.

以下に挙げる各~表tにて，所与の~path~commandの構文を述べるときは、 次の記法が利用される： ◎ In the tables below, the following notation is used to describe the syntax of a given path command:

  • `()^c ： ~parameterを~group化する ◎ (): grouping of parameters
  • `+^c ： 所与の~parameter（または~group）が 1 個~以上 要求される ◎ +: 1 or more of the given parameter(s) is required

~path~commandの記述における ( %cpx, %cpy ) は、現在の点の座標を表現する。 ◎ In the description of the path commands, cpx and cpy represent the coordinates of the current point.

9.3.2. ~path~dataの指定-法： `d^p ~prop

◎名 `d@p ◎値 `none^v | `string$t ◎初 `none^v ◎適 `path$e 要素 ◎継 されない ◎百 受容しない ◎算 指定されたとおり ◎ア 注釈文を見よ ◎表終

`d$p ~propは、 `path$e 要素の図形を指定するために利用される。 ◎ The d property is used to specify the shape of a ‘path’ element.

値 `none^v は、 要素~用の~path~dataは無いことを指示する。 `path$e 要素に対しては、これは［ 要素は描画されず、先祖`容器~要素$の`限界~box$にも寄与しない ］ことを意味する。 ◎ The value none indicates that there is no path data for the element. For ‘path’ elements, this means that the element does not render or contribute to the bounding box of ancestor container elements.

~pathは、複数の区分からなり，［ `~moveto$pC, `~closepath$pC ］以外のどの~commandも — 明示的か暗黙的かを問わず — 1 個の `~path区分@ を定義する。 ◎ A path is made up of multiple segments, and every command, either explicit or implicit, other than moveto or closepath, defines one path segment.

~path~dataの中で指定された座標や長さは、 すべて，現在の利用元~座標系における`利用元~単位$による値として扱うモノトスル。 ◎ All coordinates and lengths specified within path data must be treated as being in user units in the current user coordinate system.

`string$t 値は、 ~path~data文字列を利用して図形を指定する。 `string$t 値の内容は、 下に定義される `svg-path$P ~EBNF文法に合致しなければナラナイ。 文字列の中の~errorは、 `~path~data内の~errorの取扱い$secにおける規則に則って取扱われる。 ~path~data文字列が妥当な~commandを包含していない場合の挙動は、 値 `none^v と同じになる。 ◎ The <string> value specifies a shape using a path data string. The contents of the <string> value must match the svg-path EBNF grammar defined below, and errors within the string are handled according to the rules in the Path Data Error Handling section. If the path data string contains no valid commands, then the behavior is the same as the none value.

~animationにおいて 2 つの `d$p ~prop値を滑らかに補間できるのは、 ~path~data文字列が包含する構造が同じになる場合に限られる （すなわち、~path~data~commandは正確に同じ個数，同じ順序, 同じ型からなる）。 ~animationが指定されていて，~path~data~commandの~listが成す構造が同じでない場合、 互いの値は`離散的$な`~animation型$を利用して`補間され$るモノトスル。 ◎ For animation, two d property values can only be interpolated smoothly when the path data strings contain have the same structure, (i.e. exactly the same number and types of path data commands which are in the same order). If an animation is specified and the lists of path data commands do not have the same structure, then the values must be interpolated using the discrete animation type.

~path~data~commandの~listが成す構造が同じ場合、 各~path~data~commandに対する各~parameterは，別々に`実数として補間され$るモノトスル。 %large-arc-flag, %sweep-flag は、 0 〜 1 の合間の小数として補間して，その結果の 0 以外の値は 1 と見なすモノトスル。 ◎ If the list of path data commands have the same structure, then each parameter to each path data command must be interpolated separately as real numbers. Flags and booleans must be interpolated as fractions between zero and one, with any non-zero value considered to be a value of one/true.

London Editor's Meeting にて、 “`d$p は（名前はそのままに）~path~data文字列~値を伴う`呈示~属性$になる” ものと解決された。 ◎ Resolved that "d will become a presentation attribute (no name change) with path data string as value" at London Editor's Meeting.

~path~data文字列~内に利用できる各種~commandには、 次に挙げるものがあり，以下の各~節に~~述べられる：

  • `~moveto$pC（ `M^pc, `m^pc ） ⇒ 現在の点を新たに設定する。 【この項目は、この訳による補完】
  • `~closepath$pC（ `Z^pc, `z^pc ） ⇒ 現在の下位pathを閉じる。
  • `~lineto$pC（ `L^pc, `l^pc, `H^pc, `h^pc, `V^pc, `v^pc ） ⇒ 直線~区分を描く。
  • `三次~Bezier~curveto$pC（ `C^pc, `c^pc, `S^pc, `s^pc ）（略して `~curveto$pC ） ⇒ 三次~Bezier曲線を描く。 これらの区分は［ 始点, 終点, 2 個の制御-点 ］で定義される。
  • `二次~Bezier~curveto$pC（ `Q^pc, `q^pc, `T^pc, `t^pc ） ⇒ 二次~Bezier曲線を描く。 これらの区分は［ 始点, 終点, 1 個の制御-点 ］で定義される
  • `~arcto$pC（ `A^pc, `a^pc ） ⇒ 楕円-弧を成す区分を描く。
◎ The following sections list the commands that canbe used in path data strings. Those that draw straight line segments include the lineto commands (L, l, H, h, V and v) and the close path commands (Z and z). These three groups of commands draw curves: • Cubic Bézier commands (C, c, S and s). A cubic Bézier segment is defined by a start point, an end point, and two control points. • Quadratic Bézier commands (Q, q, T and t). A quadratic Bézier segment is defined by a start point, an end point, and one control point. • Elliptical arc commands (A and a). An elliptical arc segment draws a segment of an ellipse.

9.3.3. `~moveto^pC ~command

`~moveto$pC ~command（ `M^pc ／ `m^pc ）は、 新たな `初期~点@ と, 新たな現在の点を確立するモノトスル。 その効果は、 “~pen” を持ち上げて新たな所在へ移動したかのようになる。 ~path~data区分は `~moveto$pC ~commandから始まらなければナラナイ。 後続な `~moveto$pC ~command（すなわち、最初の~commandでない `~moveto$pC ）は、 新たな`下位path^emの開始を表現する。 ◎ The "moveto" commands (M or m) must establish a new initial point and a new current point. The effect is as if the "pen" were lifted and moved to a new location. A path data segment (if there is one) must begin with a "moveto" command. Subsequent "moveto" commands (i.e., when the "moveto" is not the first command) represent the start of a new subpath:

【 下位pathには `~moveto$pC ~commandから開始されないものもある（`~closepath$pCを見よ）。 そのような下位pathにも、`初期~点$は（暗黙的に）定義される。 】

◎路c `M^pc （絶対）／ `m^pc （相対） ◎路名 `~moveto$pC （ `moveto^en ） ◎路p ( %x %y )+ ◎路述 所与の座標 ( %x, %y ) から新たな下位pathを開始する。 ［ 大文字 `M^pc は絶対~座標 ／ 小文字 `m^pc は相対~座標 ］が後続することを指示する。 `~moveto$pC に複数の座標~pairが後続している場合、 後続な~pairは，暗黙的に `~lineto$pC ~commandとして扱われる。 よって，そのような暗黙的な `~lineto$pC ~commandは、 `~moveto$pC が相対ならば相対になり，絶対ならば絶対になる。 ~pathの最初の~commandとして現れる相対 `~moveto$pC （ `m^pc ）は， 絶対~座標の~pairとして扱われるが、 この事例でも，後続な座標~pairは相対として扱われる。 ◎表終 ◎ Command Name Parameters Description ◎ M (absolute) m (relative) moveto (x y)+ ◎ Start a new sub-path at the given (x,y) coordinates. M (uppercase) indicates that absolute coordinates will follow; m (lowercase) indicates that relative coordinates will follow. If a moveto is followed by multiple pairs of coordinates, the subsequent pairs are treated as implicit lineto commands. Hence, implicit lineto commands will be relative if the moveto is relative, and absolute if the moveto is absolute. If a relative moveto (m) appears as the first element of the path, then it is treated as a pair of absolute coordinates. In this case, subsequent pairs of coordinates are treated as relative even though the initial moveto is interpreted as an absolute moveto.

相対 `m^pc ~commandが利用されたときの移動-先の位置は、 ( %cpx ~PLUS %x, %cpy ~PLUS %y ) になる。 ◎ When a relative m command is used, the position moved to is (cpx + x, cpy + y).

9.3.4. `~closepath^pC ~command

`~closepath$pC （ `Z^pc ／ `z^pc ）は、 その`初期~点$へ戻るよう接続して，現在の下位pathを終端する。 現在の点から現在の下位pathの`初期~点$へは、 自動的に直線が描かれる — この`~path区分$は長さ 0 にもなり得る。 ◎ The "closepath" (Z or z) ends the current subpath by connecting it back to its initial point. An automatic straight line is drawn from the current point to the initial point of the current subpath. This path segment may be of zero length.

`~closepath$pC の直後にある~commandは、 次の下位pathを開始する。 次の下位pathの`初期~点$は、 その~commandが `~moveto$pC であるならば，それで識別され、 他の場合は，現在の下位pathの`初期~点$と同じになるモノトスル。 ◎ If a "closepath" is followed immediately by a "moveto", then the "moveto" identifies the start point of the next subpath. If a "closepath" is followed immediately by any other command, then the next subpath starts at the same initial point as the current subpath.

下位pathを［ `~closepath$pC ~commandで終端したとき, 他の~command（ `~lineto$pC など）を介して “手動で閉じた” とき ］に起こる挙動は、［ `stroke-linejoin$p, `stroke-linecap$p ］がどう~~実施されるかにおいて相違する。 `~closepath$pC で終端した場合、 下位pathの最終~区分の終端は， `stroke-linejoin$p の現在の値を利用して下位pathの初期~区分の始端に “継がれる”。 下位pathを “手動で” 閉じた場合、［ 最初の区分の始端, 最後の区分の終端 ］は継がれない代わりに，両者とも `stroke-linecap$p の現在の値を利用して~capされる。 ~commandの終端における新たな現在の点は、 現在の下位pathの初期~点に設定される。 ◎ When a subpath ends in a "closepath," it differs in behavior from what happens when "manually" closing a subpath via a "lineto" command in how ‘stroke-linejoin’ and ‘stroke-linecap’ are implemented. With "closepath", the end of the final segment of the subpath is "joined" with the start of the initial segment of the subpath using the current value of ‘stroke-linejoin’. If you instead "manually" close the subpath via a "lineto" command, the start of the first segment and the end of the last segment are not joined but instead are each capped using the current value of ‘stroke-linecap’. At the end of the command, the new current point is set to the initial point of the current subpath.

◎路c `Z^pc ／ `z^pc ◎路名 `~closepath$pC （ `closepath^en ） ◎路p （なし） ◎路述 現在の下位pathの`初期~点$へ戻るよう接続することにより，現在の下位pathを閉じる（上の注釈文を見よ）。 `Z^pc, `z^pc 両~commandとも~parameterをとらないので、 それらの効果は一致する。 ◎表終 ◎ Command Name Parameters Description ◎ Z or z closepath (none) ◎ Close the current subpath by connecting it back to the current subpath's initial point (see prose above). Since the Z and z commands take no parameters, they have an identical effect.

`閉な下位path@ になるためには、 `~closepath$pC ~commandで閉じられなければナラナイ — これは最初と最後の`~path区分$を “継ぐ” 。 他のどの~pathも `開な下位path@ とされる。 ◎ A closed subpath must be closed with a "closepath" command, this "joins" the first and last path segments. Any other path is an open subpath.

注記： 【この注記は，上の段落（ “手動で閉じる” ）と重複しているので、和訳は省略する。】 ◎ A closed subpath differs in behavior from an open subpath whose final coordinate is the initial point of the subpath. The first and last path segments of an open subpath will not be joined, even when the final coordinate of the last path segment is the initial point of the subpath. This will result in the first and last path segments being capped using the current value of stroke-linecap rather than joined using the current value of stroke-linejoin.

【ここにあった段落は， `must^en の有無を除いて上の段落 “`~closepath^pC の直後にある~command…” と同じなので、和訳は省略する（ここにあった `must^en は上の段落に組み入れている）。】 ◎ If a "closepath" is followed immediately by a "moveto", then the "moveto" identifies the start point of the next subpath. If a "closepath" is followed immediately by any other command, then the next subpath must start at the same initial point as the current subpath.

9.3.4.1. 区分を完了して~pathを閉じる演算

基本~図形を等価な~pathとして表現するため、 追加的な直線~区分を導入せずに，曲線を含む図形を閉じる仕方が必要になる（追加的な区分の長さが 0 になるとしても）。 その目的に、 `区分を完了して~pathを閉じる@ 演算がここに定義される： ◎ In order to represent the basic shapes as equivalent paths, there must be a way to close curved shapes without introducing an additional straight-line segment (even if that segment would have zero length). For that purpose, a segment-completing close path operation is defined here. ◎ A segment-completing close path operation combines with the previous path command, with two effects:

  • この演算を用いる所では、 直前に~commandが在って，［ その最終~座標~点は、 現在の下位pathの`初期~点$に正確に合致している ］ことが確保されているとする。 ◎ It ensures that the final coordinate point of the previous command exactly matches the initial point of the current subpath.
  • この演算は、下位pathの最終~点と初期~点を継いで，閉な下位pathにする。 ◎ It joins the final and initial points of the subpath, making it a closed subpath.

区分を完了して~pathを閉じる演算は、 現時点では，~path~data構文~内の~commandとしては~supportされない。 ~WGは、この仕様の将来~version用にそのような構文を提案した。 ◎ Segment-completing close path operations are not currently supported as a command in the path data syntax. The working group has proposed such a syntax for future versions of the specification.

9.3.5. `~lineto^pC ~command

各種 `~lineto$pC ~commandは、 現在の点から新たな点への直線を描く： ◎ The various "lineto" commands draw straight lines from the current point to a new point:

◎路c `L^pc （絶対）／ `l^pc （相対） ◎路名 `~lineto$pC （ `lineto^en ） ◎路p ( %x %y )+ ◎路述 現在の点から所与の（ %x, %y ) 座標へ線を描く — それが新たな現在の点になる。 ［ 大文字 `L^pc は絶対~座標 ／ 小文字 `l^pc は相対~座標 ］が後続することを指示する。 複数個の座標~pairを指定してもヨイ — それらは、折線を描く。 ~commandの終端における新たな現在の点は、 供された最終~座標~pairに設定される。 ◎表終 ◎ Command Name Parameters Description ◎ L (absolute) l (relative) lineto (x y)+ ◎ Draw a line from the current point to the given (x,y) coordinate which becomes the new current point. L (uppercase) indicates that absolute coordinates will follow; l (lowercase) indicates that relative coordinates will follow. A number of coordinates pairs may be specified to draw a polyline. At the end of the command, the new current point is set to the final set of coordinates provided.
◎路c `H^pc （絶対）／ `h^pc （相対） ◎路名 `水平~lineto^pC （ `horizontal lineto^en ） ◎路p %x+ ◎路述 現在の点から水平に線を描く。 ［ 大文字 `H^pc は絶対~座標 ／ 小文字 `h^pc は相対~座標 ］が後続することを指示する。 複数の %x 値を供せる（これは通例的には~~無駄があるが）。 `h^pc ~commandは［ %y 座標~用に 0 が指定された `l^pc ~command ］と等価になる。 `H^pc ~commandは［ %y 座標~用に現在の点の %y 座標が指定された `L^pc ~command ］と等価になる。 ~commandの終端における新たな現在の点は、 最終~座標~値からとられる。 ◎表終 ◎ H (absolute) h (relative) horizontal lineto x+ ◎ Draws a horizontal line from the current point. H (uppercase) indicates that absolute coordinates will follow; h (lowercase) indicates that relative coordinates will follow. Multiple x values can be provided (although usually this doesn't make sense). An H or h command is equivalent to an L or l command with 0 specified for the y coordinate. At the end of the command, the new current point is taken from the final coordinate value.
◎路c `V^pc （絶対）／ `v^pc （相対） ◎路名 `垂直~lineto^pC （ `vertical lineto^en ） ◎路p %y+ ◎路述 現在の点から垂直に線を描く。 ［ 大文字 `V^pc は絶対~座標 ／ 小文字 `v^pc は相対~座標 ］が後続することを指示する。 複数の %y 値を供せる（これは通例的には~~無駄があるが）。 `v^pc ~commandは［ %x 座標~用に 0 が指定された `l^pc ~command ］と等価になる。 `V^pc ~commandは［ %x 座標~用に現在の点の %x 座標が指定された `L^pc ~command ］と等価になる。 ~commandの終端における新たな現在の点は、 最終~座標~値からとられる。 ◎表終 ◎ V (absolute) v (relative) vertical lineto y+ ◎ Draws a vertical line from the current point. V (uppercase) indicates that absolute coordinates will follow; v (lowercase) indicates that relative coordinates will follow. Multiple y values can be provided (although usually this doesn't make sense). A V or v command is equivalent to an L or l command with 0 specified for the x coordinate. At the end of the command, the new current point is taken from the final coordinate value.

相対~commandが利用されたときの線の終点は、 【指定された座標（座標~pair）が 1 つだけならば】 ~commandに応じて： ◎ ↓

  • `l^pc ならば ( %cpx ~PLUS %x, %cpy ~PLUS %y ) になる。 ◎ When a relative l command is used, the end point of the line is (cpx + x, cpy + y).
  • `h^pc ならば ( %cpx ~PLUS %x, %cpy ) になる。 したがって、正な %x 値は正な~x軸~方向に線を描くことになる。 ◎ When a relative h command is used, the end point of the line is (cpx + x, cpy). This means that an h command with a positive x value draws a horizontal line in the direction of the positive x-axis.
  • `v^pc ならば ( %cpx, %cpy ~PLUS %y ) になる。 ◎ When a relative v command is used, the end point of the line is (cpx, cpy + y).

9.3.6. `三次~Bezier~curveto^pC ~command

各種 `三次~Bezier~curveto^pC ~commandは、 以下に従う: ◎ The cubic Bézier commands are as follows:

◎路c `C^pc （絶対）／ `c^pc （相対） ◎路名 `~curveto$pC （ `curveto^en ）（または冗長に，`三次~Bezier~curveto^pC （ `cubic Bézier curveto^en ）） ◎路p ( %x1 %y1 %x2 %y2 %x %y )+ ◎路述 現在の点から ( %x, %y ) へ三次~Bezier曲線を描く — ( %x1, %y1 ) は曲線の始端側の制御-点, ( %x2, %y2 ) は曲線の終端側の制御-点に利用される。 ［ 大文字 `C^pc は絶対~座標 ／ 小文字 `c^pc は相対~座標 ］が後続することを指示する。 複数個の［ 座標~pairたちが成す組 ］を指定してもヨイ — それらは、同じ~commandの下で複数の曲線を連続して描く。 ~commandの終端における新たな現在の点は、 最後の組に利用された最終 ( %x, %y ) 座標~pairになる。 ◎表終 ◎ Command Name Parameters Description ◎ C (absolute) c (relative) curveto (x1 y1 x2 y2 x y)+ ◎ Draws a cubic Bézier curve from the current point to (x,y) using (x1,y1) as the control point at the beginning of the curve and (x2,y2) as the control point at the end of the curve. C (uppercase) indicates that absolute coordinates will follow; c (lowercase) indicates that relative coordinates will follow. Multiple sets of coordinates may be specified to draw a polybézier. At the end of the command, the new current point becomes the final (x,y) coordinate pair used in the polybézier.
◎路c `S^pc （絶対）／ `s^pc （相対） ◎路名 略式（滑らかに） `~curveto$pC （ `shorthand/smooth curveto^en ） ◎路p ( %x2 %y2 %x %y )+ ◎路述 現在の点から ( %x, %y ) へ三次~Bezier曲線を描く。 始端側の制御-点は、 直前の~commandの終端側の制御-点から現在の点を挟む`対称点$と見做される。 直前の~commandが無い, または［ `C^pc ／ `c^pc ／ `S^pc ／ `s^pc ］でない場合、 現在の点が始端側の制御-点に利用される。 ( %x2, %y2 ) は、曲線の終端側の制御-点を与える。 ［ 大文字 `S^pc は絶対~座標 ／ 小文字 `s^pc は相対~座標 ］が後続することを指示する。 複数個の［ 座標~pairたちが成す組 ］を指定してもヨイ — それらは、同じ~commandの下で複数の曲線を連続して描く。 ~commandの終端における新たな現在の点は、 最後の組に利用された最終 ( %x, %y ) 座標~pairになる。 ◎表終 ◎ S (absolute) s (relative) shorthand/smooth curveto (x2 y2 x y)+ ◎ Draws a cubic Bézier curve from the current point to (x,y). The first control point is assumed to be the reflection of the second control point on the previous command relative to the current point. (If there is no previous command or if the previous command was not an C, c, S or s, assume the first control point is coincident with the current point.) (x2,y2) is the second control point (i.e., the control point at the end of the curve). S (uppercase) indicates that absolute coordinates will follow; s (lowercase) indicates that relative coordinates will follow. Multiple sets of coordinates may be specified to draw a polybézier. At the end of the command, the new current point becomes the final (x,y) coordinate pair used in the polybézier.

相対［ `c^pc ／ `s^pc ］~commandが利用されたときは、 各~相対~座標~pairは `m^pc ~commandに対するときと同じに算出される。 例えば，両~commandとも，曲線の最終~制御-点は ( %cpx ~PLUS %x, %cpy ~PLUS %y ) になる。 ◎ When a relative c or s command is used, each of the relative coordinate pairs is computed as for those in an m command. For example, the final control point of the curve of both commands is (cpx + x, cpy + y).

例 `cubic01^xl は、 ~pathの中での三次~Bezier~commandの単純な利用を示す。 この例は、内部~CSS~stylesheetを利用して~style付け~propをアテガう。 `S^pc ~command用の制御-点は、 直前の `C^pc ~command用の制御-点から `S^pc ~commandの始点を挟む`対称点$として自動的に算出されることに注意。 ◎ Example cubic01 shows some simple uses of cubic Bézier commands within a path. The example uses an internal CSS style sheet to assign styling properties. Note that the control point for the "S" command is computed automatically as the reflection of the control point for the previous "C" command relative to the start point of the "S" command. 

<?xml version="1.0" standalone="no"?>
<svg width="5cm" height="4cm" viewBox="0 0 500 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <title>
例 `cubic01^xl
— ~path~data内の三次~Bezier~command
◎
Example cubic01- cubic Bézier commands in path data
</title>
  <desc>
~path~dataの単純な例を示す絵
— `C^pc , `S^pc 両~commandを利用し，各 制御-点, 終点を注釈とともに示す。
◎
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>
例 `cubic01^xl ◎ Example cubic01
`paths/cubic01.svg^viewAs

次の絵は、 三次~Bezier曲線が制御-点の位置に依存して，図形が変化する様子を示す。 最初の 5 個の例は、 単独の三次~Bezier`~path区分$を図解する。 右下にある例は `C^pc ~commandに後続する `S^pc ~commandを示す。 ◎ The following picture shows some how cubic Bézier curves change their shape depending on the position of the control points. The first five examples illustrate a single cubic Bézier path segment. The example at the lower right shows a "C" command followed by an "S" command.

`paths/cubic02.svg^viewAs

9.3.7. `二次~Bezier~curveto^pC ~command

各種 `二次~Bezier~curveto^pC ~commandは、 以下に従う: ◎ The quadratic Bézier commands are as follows:

◎路c `Q^pc （絶対）／ `q^pc （相対） ◎路名 `二次~Bezier~curveto$pC （ `quadratic Bézier curve^en ） ◎路p ( %x1 %y1 %x %y )+ ◎路述 現在の点から ( %x, %y ) へ二次~Bezier曲線を描く — ( %x1, %y1 ) を制御-点に利用して。 ［ 大文字 `Q^pc は絶対~座標 ／ 小文字 `q^pc は相対~座標 ］が後続することを指示する。 複数個の［ 座標~pairたちが成す組 ］を指定してもヨイ — それらは、同じ~commandの下で複数の曲線を連続して描く。 ~commandの終端における新たな現在の点は、 最後の組に利用された最終 ( %x, %y ) 座標~pairになる。 ◎表終 ◎ Command Name Parameters Description ◎ Q (absolute) q (relative) quadratic Bézier curveto (x1 y1 x y)+ ◎ Draws a quadratic Bézier curve from the current point to (x,y) using (x1,y1) as the control point. Q (uppercase) indicates that absolute coordinates will follow; q (lowercase) indicates that relative coordinates will follow. Multiple sets of coordinates may be specified to draw a polybézier. At the end of the command, the new current point becomes the final (x,y) coordinate pair used in the polybézier.
◎路c `T^pc （絶対）／ `t^pc （相対） ◎路名 略式（滑らかに）`二次~Bezier~curveto$pC （ `shorthand/smooth quadratic Bézier curve^en ） ◎路p ( %x %y )+ ◎路述 現在の点から ( %x, %y ) へ二次~Bezier曲線を描く。 制御-点は、 直前の~commandの制御-点から現在の点を挟む`対称点$と見做される。 直前の~commandが無い, または［ `Q^pc ／ `q^pc ／ `T^pc ／ `t^pc ］でない場合、 現在の点が制御-点に利用される。 ［ 大文字 `T^pc は絶対~座標 ／ 小文字 `t^pc は相対~座標 ］が後続することを指示する。 ~commandの終端における新たな現在の点は、 最後に利用された最終 ( %x, %y ) 座標~pairになる。 ◎表終 ◎ T (absolute) t (relative) Shorthand/smooth quadratic Bézier curveto (x y)+ ◎ Draws a quadratic Bézier curve from the current point to (x,y). The control point is assumed to be the reflection of the control point on the previous command relative to the current point. (If there is no previous command or if the previous command was not a Q, q, T or t, assume the control point is coincident with the current point.) T (uppercase) indicates that absolute coordinates will follow; t (lowercase) indicates that relative coordinates will follow. At the end of the command, the new current point becomes the final (x,y) coordinate pair used in the polybézier.

相対［ `q^pc ／ `t^pc ］~commandが利用されたときは、 各~相対~座標~pairは `m^pc ~commandに対するときと同じに算出される。 例えば，両~commandとも，最終~制御-点は ( %cpx ~PLUS %x, %cpy ~PLUS %y ) になる。 ◎ When a relative q or t command is used, each of the relative coordinate pairs is computed as for those in an m command. For example, the final control point of the curve of both commands is (cpx + x, cpy + y).

例 `quad01^xl： ~pathの中での二次~Bezier~commandの単純な利用を示す。 `T^pc ~command用の制御-点は、 直前の `Q^pc ~command用の制御-点から `T^pc ~commandの始点を挟む`対称点$として，自動的に算出されることに注意。 ◎ Example quad01 shows some simple uses of quadratic Bézier commands within a path. Note that the control point for the "T" command is computed automatically as the reflection of the control point for the previous "Q" command relative to the start point of the "T" command. 

<?xml version="1.0" standalone="no"?>
<svg width="12cm" height="6cm" viewBox="0 0 1200 600"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <title>
例 `quad01^xl
— ~path~data内の二次~Bezier~command
◎
Example quad01 - quadratic Bézier commands in path data
</title>
  <desc>
`Q^pc, `T^pc 両~commandを利用し，各 制御-点, 端点を注釈とともに示す絵。
◎
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>
例 `quad01^xl ◎ Example quad01
`paths/quad01.svg^viewAs

9.3.8. `~arcto^pC ~command

~SVG-2要件： ~SVG~path構文において，もっと単純に弧を描けるようにする。 ◎ SVG 2 Requirement: Make it simpler to draw arcs in SVG path syntax.

  • 解決： ~path内の弧をより容易にする （`~~参照先＠http://www.w3.org/2011/11/04-svg-minutes.html#item08$）。 ◎ Resolution: Make arcs in paths easier.
  • 目的： 弧を与える~path~dataを，作者がもっと容易に手書きできるようにする。 ◎ Purpose: To make it easier for authors to write path data with arcs by hand.
  • Owner: Cameron (`3151$ACTION)

`~arcto^pC ~commandは、 次に従う： ◎ The elliptical arc commands are as follows:

◎路c `A^pc （絶対）／ `a^pc （相対） ◎路名 `~arcto$pC （ `elliptical arc^en ） ◎路p ( %rx %ry %x-axis-rotation %large-arc-flag %sweep-flag %x %y )+ ◎路述 現在の点から所与の ( %x, %y ) へ楕円-弧を描く。 弧が成す楕円の~sizeは 2 個の半径 %rx, %ry で定義される。 楕円の方位は %x-axis-rotation で定義される — それは、現在の座標系において，楕円を `deg$u 単位で何度~回転するかを指示する。 楕円の中心は、 他の~parameterにより課される拘束を満たすように自動的に計算される。 %large-arc-flag, %sweep-flag は、 この自動的な計算に寄与して，弧をどう描くか決定するときに利用される。 ◎表終 ◎ Command Name Parameters Description ◎ A (absolute) a (relative) elliptical arc (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+ ◎ Draws an elliptical arc from the current point to (x, y). The size and orientation of the ellipse are defined by two radii (rx, ry) and an x-axis-rotation, which indicates how the ellipse as a whole is rotated, in degrees, relative to the current coordinate system. The center (cx, cy) of the ellipse is calculated automatically to satisfy the constraints imposed by the other parameters. large-arc-flag and sweep-flag contribute to the automatic calculations and help determine how the arc is drawn.

相対 `a^pc ~commandが利用されたときは、 弧の終点は ( %cpx ~PLUS %x, %cpy ~PLUS %y ) になる。 ◎ When a relative a command is used, the end point of the arc is (cpx + x, cpy + y).

例 `arcs01^xl は、 ~path内での `~arcto$pC ~commandの単純な利用を示す。 ◎ Example arcs01 shows some simple uses of arc commands within a path. 

<?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>
例 `arcs01^xl
— ~path~data内の `~arcto$pC ~command
◎
Example arcs01 - arc commands in path data
</title>
  <desc>
2 個の切れ端からなる~pie-chartの絵,
弧と線が~~交互に並ぶ絵
◎
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>
例 `arcs01^xl ◎ Example arcs01
`paths/arcs01.svg^viewAs

`~arcto$pC ~commandは、 次の拘束を満たすような，楕円の一部を成す弧を描くモノトスル： ◎ The elliptical arc command draws a section of an ellipse which must meet the following constraints:

  • 弧は現在の点から開始する ◎ the arc starts at the current point
  • 弧は点 ( %x, %y ) で終端する ◎ the arc ends at point (x, y)
  • 楕円の~x軸~半径は %rx, ~y軸~半径は %ry ◎ the ellipse has the two radii (rx, ry)
  • 楕円は現在の座標系において， `deg$u 単位で %x-axis-rotation だけ回転される。 ◎ the x-axis of the ellipse is rotated by x-axis-rotation degrees relative to the x-axis of the current coordinate system.

ほとんどの状況では、 これらの拘束を満たす弧が，実際には 4 個あり得る — そのような弧を含む楕円は 2 個あり、 そのそれぞれに対し，振れが［ 180 `deg$u 以上の “長弧”, 180 `deg$u 以下の “短弧” ］を表現する弧がある。 %large-arc-flag, %sweep-flag は、これらの 4 個の弧のうちどれを描くかを，次に従って指示する： ◎ For most situations, there are actually four different arcs (two different ellipses, each with two different arc sweeps) that satisfy these constraints. large-arc-flag and sweep-flag indicate which one of the four arcs are drawn, as follows:

  • まず， %large-arc-flag に応じて［ `1^pc ならば長弧 ／ `0^pc ならば短弧 ］のみに絞り込む。 ◎ Of the four candidate arc sweeps, two will represent an arc sweep of greater than or equal to 180 degrees (the "large-arc"), and two will represent an arc sweep of less than or equal to 180 degrees (the "small-arc"). If large-arc-flag is '1', then one of the two larger arc sweeps will be chosen; otherwise, if large-arc-flag is '0', one of the smaller arc sweeps will be chosen,
  • %sweep-flag に応じて，前項で絞り込んだ弧のうち［ `1^pc ならば “正な方向” ／ `0^pc ならば “負な方向” ］に描かれる弧を選ぶ （すなわち、楕円の公式［ ( %x, %y) ~EQ 楕円の中心 ~PLUS ( %rx ~MUL `cos^op( %theta ), %ry ~MUL `sin^op( %theta ) ］において， %theta は、現在の点に対応する角度から開始して，弧が ( %x, %y ) に達するまで［ 正な方向ならば増加する／ 負な方向ならば減少する ］ように評価される）。 ◎ If sweep-flag is '1', then the arc will be drawn in a "positive-angle" direction (i.e., the ellipse formula x=cx+rx*cos(theta) and y=cy+ry*sin(theta) is evaluated such that theta starts at an angle corresponding to the current point and increases positively until the arc reaches (x,y)). A value of 0 causes the arc to be drawn in a "negative-angle" direction (i.e., theta starts at an angle value corresponding to the current point and decreases until the arc reaches (x,y)).

［ %large-arc-flag, %sweep-flag ］の各~組合nに応じて描かれる 4 個の異なる弧を次に図解する。 各~事例には，次の~path~data~commandが利用される： ◎ The following illustrates the four combinations of large-arc-flag and sweep-flag and the four different arcs that will be drawn based on the values of these flags. For each case, the following path data command was used: 

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

ここで `?,?^l は、 生成される 4 個のアリな事例に応じて［ `0,0^l ／ `0,1^l ／ `1,0^l ／ `1,1^l ］に置換される。 ◎ where "?,?" is replaced by "0,0" "0,1" "1,0" and "1,1" to generate the four possible cases.

`paths/arcs02.svg^viewAs

~path~dataのにおける楕円- `~arcto$pC ~command用の詳細な実装~注記については、 `§ 楕円-弧に対する範囲~外の~parameter＠#ArcOutOfRangeParameters$ を見よ。 ◎ Refer to the section on Out-of-range elliptical arc parameters for detailed implementation notes for the path data elliptical arc commands.

`§ 実装~注記＠~SVG2/implnote.html#ArcImplementationNotes$に、 ~SVGによる弧~記法を［ 中心~点と弧の振れを利用する形式 ］に変換する必要がある~software用に関連な定式化がある。 ◎ The Implementation Notes appendix has relevant formulae for software that needs to convert SVG arc notation to a format that uses center points and arc sweeps.

9.3.9. ~path~data用の文法

~SVG~path~dataは、次の`~EBNF文法＠~SVGtypes#syntax$に合致する： ◎ SVG path data matches the following EBNF grammar. 

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::=
	"+"|"-"

exponent::=
	("e" | "E") sign? digit+

fractional-constant::=
	(digit* "." digit+) | digit+

number::=
	fractional-constant exponent?

flag::=
	("0" | "1")

comma_wsp::=
	(wsp+ ","? wsp*) | ("," wsp*)

wsp::=
	(#x9 | #x20 | #xA | #xC | #xD)

digit::=
	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9"

~EBNFの処理は、 所与の~EBNF生成規則を［ それを満たさなくなる文字に遭遇する所 ］までアリな限り多く消費するモノトスル。 したがって文字列 `M 100-200^l に対しては、 `~moveto$pC 用の最初の座標は，文字~並び `100^l を消費して負符号に遭遇した所で停止する — 生成規則 `coordinate^P 内では、 負符号は数字に後続し得ないので。 結果の座標~pairは ( `100^l, `-200^l ) になる。 ◎ The processing of the EBNF must consume as much of a given EBNF production as possible, stopping at the point when a character is encountered which no longer satisfies the production. Thus, in the string "M 100-200", the first coordinate for the "moveto" consumes the characters "100" and stops upon encountering the minus sign because the minus sign cannot follow a digit in the production of a "coordinate". The result is that the first coordinate will be "100" and the second coordinate will be "-200".

同様に，文字列 `M 0.6.5^l に対しては、 `~moveto$pC の最初の座標は文字~並び `0.6^l を消費して， 2 個目の小数点に遭遇した所で停止する — 生成規則 `coordinate^P 内で許容される小数点は 1 個までなので。 結果の座標~pairは ( `0.6^l, `.5^l ) になる。 ◎ Similarly, for the string "M 0.6.5", the first coordinate of the "moveto" consumes the characters "0.6" and stops upon encountering the second decimal point because the production of a "coordinate" only allows one decimal point. The result is that the first coordinate will be "0.6" and the second coordinate will be ".5".

`以前の仕様の文法＠~SVG11/paths.html#PathDataBNF$では、 尾部に 10 進~数字を伴わない小数点を，実数~用に許容していた（例： `23.^v ）。 ~SVG-2においては、 ~CSSによる実数の構文解析-法 `css-syntax-3$r に倣い， 実数~用に緩められた この文法は許容されない。 しかしながら，~UAは、 一義的に構文解析できるならば，そのような実数を受容し続けてもヨイ。 ［ 作者／著作~tool ］は、この許容されない実数~形式を利用してはナラナイ。 ◎ The grammar of previous specifications allowed a trailing decimal point without any decimal digits for numbers (e.g 23.). SVG 2 harmonizes number parsing with CSS [css-syntax-3], disallowing the relaxed grammar for numbers. However, user agents may continue to accept numbers with trailing decimal points when parsing is unambiguous. Authors and authoring tools must not use the disallowed number format.

~EBNFでは、 `d$p ~prop内の~path~dataには空~文字列も許容される。 空な~path~data文字列は、 ~pathの描画を不能化する。 描画は `d$p ~propの値が `none^v のときにも不能化される。 ◎ The EBNF allows the path data string in the d property to be empty. An empty path data string disables rendering of the path. Rendering is also disabled when the d property has the value none.

文法に合致していない~path~dataに遭遇した場合、 ~path~dataは~errorになるとする （`~path~data内の~errorの取扱い$secを見よ）。 ◎ If path data not matching the grammar is encountered, then the path data is in error (see Error Handling).

9.4. ~pathの方向性

`~marker＠~SVGpainting#Markers$の方位（ `orient$a ）／ `~cap図形$（ `stroke-linecap$p ）などの一部の特能は、 所与の［ ~pathに沿う距離, 個々の区分の始端や終端 ］における`~pathの方向$に基づいて定義される。 ◎ Some features, such as the orientation of markers and the shapes of line caps, are defined in terms of the direction of the path at a given distance along the path or at the start or end of an individual segment.

所与の~path上の指定された［ ~pathに沿う距離 %距離 （ 0 ~LTE %距離 ~LTE ~pathの長さ ） ］における `~pathの方向@ は、次に従って定義される: ◎ The direction of a path at a specified distance along the path is defined as follows:

  1. %~path ~LET 所与の~pathから，長さ 0 の~path区分~すべてを除外した~path ◎ ↓
  2. ~IF［ %~path を成す~path区分は無い ］ ⇒ ~RET 正な~x軸~方向
  3. ~IF［ %距離 ~EQ %~path の長さ ］ ⇒ ~RET %~path を成す最後の~path区分の終点に入る方向 ◎ ↓↓If the given distance is zero, then the direction of the path is the direction at the start of the path's first segment. ◎ Otherwise, if the given distance is the length of the path, then the direction of the path is the direction at the end of the path's last segment.
  4. ( %地点, %~path区分 ) ~LET ( %~path の始端から~pathに沿って %距離 にある地点, その地点を含む~path区分 ) — ここでは、 どの~path区分も，その終点は当の地点を含まない（次の下位pathの始点である）ものと見なす ◎ ↓

  5. ~IF［ %地点 は %~path区分 の始点にある ］ ⇒ ~RET その始点から出る方向 ◎ Otherwise, if the given distance along the path occurs at a path segment boundary, then the direction of the path is the direction at the start of the segment at the given distance, considering each segment to be endpoint exclusive. ◎ This will "move past" zero length segments, and choose the later segment if the distance is at the boundary between two non-zero length segments.

    注記： 区分~境界の既定の方向は［ `~cap図形$を計算する／ `~markerを描画する＠~SVGpainting#RenderingMarkers$ ］ときには上書きされる。 ◎ The default direction at segment boundaries is overriden when calculating a cap shape and when rendering markers.

  6. ~RET %~path区分 の %地点 における接線~方向（順方向） — ただし，接線が定義されない場合（~Bezier区分~内の尖点である）、 方向は定義されない ⇒ この事例では、 %地点 に入る方向, %地点 から出る方向の合間†にある方向が利用されるベキである 【† `between^en ： 二等分線を意図しているのか、はっきりしない。】 ◎ Otherwise, the given distance along the path occurs in the middle of a non-zero length path segment. The direction is simply the direction of the curve at that point. If the point lies at a discontinuity, such as a cusp in a Bézier segment, then the direction is undefined; in this case, a direction between the incoming and outgoing direction around the discontinuity should be used.

【 原文によるこの~algoは，下に定義する手続きも利用する形で記されているが、 この訳では，（長さ 0 の~path区分を除外しておくことで）利用しない形に単純~化している。 】

`~path区分$ %区分 の `始端における方向@ は、次に従って定義される：

  1. ~IF［ %区分 の長さ ~NEQ 0 ］ ⇒ ~RET %区分 の始点から出る方向
  2. ~IF［ %区分 に先行する長さ 0 でない区分は在る ］ ⇒ ~RET それらのうち %区分 に最も近いものの終点に入る方向
  3. ~IF［ %区分 に後続する長さ 0 でない区分は在る ］ ⇒ ~RET それらのうち %区分 に最も近いものの始点から出る方向
  4. ~RET 正な~x軸~方向
◎ The direction at the start of a path segment is defined as follows: • If length of the entire path the segment belongs to is zero, then the direction at the start of the segment points in the same direction as the positive x-axis. • Otherwise, if the path segment is zero length and the segment does not have any preceding non-zero length segments, then the direction at the start of the segment is the same as the direction at the end of the segment. • Otherwise, if the path segment is zero length and there is some non-zero length segment preceding this segment, then the direction at the start of this segment is the same as the direction at the end of the closest preceding non-zero length segment. • Otherwise, the path segment is non-zero length. The direction at the start of the segment is simply the direction coming out of the segment's start point.

`~path区分$ %区分 の `終端における方向@ は、次に従って定義される：

  1. ~IF［ %区分 の長さ ~NEQ 0 ］ ⇒ ~RET %区分 の終点に入る方向
  2. ~IF［ %区分 に後続する長さ 0 でない区分は在る ］ ⇒ ~RET それらのうち %区分 に最も近いものの始点から出る方向
  3. ~IF［ %区分 に先行する長さ 0 でない区分は在る ］ ⇒ ~RET それらのうち %区分 に最も近いものの終点に入る方向
  4. ~RET 正な~x軸~方向
◎ The direction at the end of a path segment is defined as follows: • If length of the entire path the segment belongs to is zero, then the direction at the end of the segment points in the same direction as the positive x-axis. • Otherwise, if the path segment is zero length and the segment does not have any following non-zero length segments, then the direction at the end of the segment is the same as the direction at the start of the segment. • Otherwise, if the path segment is zero length and there is some non-zero length segment following this segment, then the direction at the end of this segment is the same as the direction at the start of the closest following non-zero length segment. • Otherwise, the path segment is non-zero length. The direction at the end of the segment is simply the direction coming in to the segment's end point.

9.5. 実装~上の注記

適合~SVG~UAは、 ~path~dataを利用する特能を，以下の詳細~に則って実装するモノトスル： ◎ A conforming SVG user agent must implement features that use path data according to the following details:

9.5.1. 楕円-弧に対する範囲~外の~parameter

`~arcto^pC ~parameterのうち %large-arc-flag, %sweep-flag 以外には， 任意の数量的な値が許可されるが、 ~UAは［ 曲線を描画する／曲線の幾何を計算する ］ときの無効な値に際しては、 次の調整を施すモノトスル： ◎ Arbitrary numerical values are permitted for all elliptical arc parameters (other than the boolean flags), but user agents must make the following adjustments for invalid values when rendering curves or calculating their geometry:

  • 区分の端点 ( %x, %y ) が現在の点に一致する場合（例：直前の区分の端点）、 楕円-弧~区分をまるごと省略することに等価になる。 ◎ If the endpoint (x, y) of the segment is identical to the current point (e.g., the endpoint of the previous segment), then this is equivalent to omitting the elliptical arc segment entirely.
  • %rx, %ry いずれかが 0 の場合、 当の弧は，端点どうしを継いでいる直線~区分（ `~lineto$pC ）として扱われる。 ◎ If either rx or ry is 0, then this arc is treated as a straight line segment (a "lineto") joining the endpoints.
  • ［ %rx ／ %ry ］に負符号がある場合は落とす — 代わりに絶対~値が利用される。 ◎ If either rx or ry have negative signs, these are dropped; the absolute value is used instead.

  • 所与の ( %rx, %ry, %x-axis-rotation ) による拘束を満たす解が無い場合（基本的に，当の楕円は、 現在の点から新たな端点まで達するほど十分~大きくない）、 ちょうど 1 個の解が見つかる所まで（楕円が十分~大きくなる所まで），当の楕円を一様に拡大する。 ◎ If rx, ry and x-axis-rotation are such that there is no solution (basically, the ellipse is not big enough to reach from the current point to the new endpoint) then the ellipse is scaled up uniformly until there is exactly one solution (until the ellipse is just big enough).

    注記： この拡縮~演算~用の数学的な公式については、 `§ 範囲~外の半径を正す＠~SVG2/implnote.html#ArcCorrectionOutOfRangeRadii$ を見よ。 ◎ See the appendix section Correction of out-of-range radii for mathematical formula for this scaling operation.

注記： 範囲~外の値に対する，この一貫した, かつ~~寛容な扱いは、 次を確保する： ◎ This forgiving yet consistent treatment of out-of-range values ensures that:

  • 計算機~算術に不可避な近似の下でも、 ある~SVG実装から書出された妥当な値たちを，別の~SVG実装が読取ったときに無効と扱われない。 さもなければ、 半円な弧などの共通的な境界~事例にて問題になる。 ◎ The inevitable approximations arising from computer arithmetic cannot cause a valid set of values written by one SVG implementation to be treated as invalid when read by another SVG implementation. This would otherwise be a problem for common boundary cases such as a semicircular arc.
  • 連続的な~animationにて，~parameterが無効な値を通過しても問題にならない。 ~motionは連続的であり続ける。 ◎ Continuous animations that cause parameters to pass through invalid values are not a problem. The motion remains continuous.

9.5.2. 対称点として指示される制御~点

［ `S^pc ／ `s^pc ／ `T^pc ／ `t^pc ］~commandは、 ~Bezier曲線として与えられた~path区分の最初の制御-点を［ 直前の`~path区分$の最終~制御-点から現在の点を挟む対称点 ］として計算することを指示する。 正確な数学は、以下に従う。 ◎ The S/s and T/t commands indicate that the first control point of the given cubic Bézier segment is calculated by reflecting the previous path segment's final control point relative to the current point. The exact math is as follows.

( %現x, %現y ) は現在の点, ( %旧x, %旧y ) は直前の`~path区分$の最終~制御-点 を表すとするとき、 対称点 ( %新x, %新y ) は次を満たす ⇒＃ ( %新x ~PLUS %旧x ) ~DIV 2 ~EQ %現x, ( %新y ~PLUS %旧y ) ~DIV 2 ~EQ %現y ◎ If the current point is (curx, cury) and the final control point of the previous path segment is (oldx2, oldy2), then the reflected point (i.e., (newx1, newy1), the first control point of the current path segment) is: ◎ (newx1, newy1) = (curx - (oldx2 - curx), cury - (oldy2 - cury)) = (2*curx - oldx2, 2*cury - oldy2)

9.5.3. 長さ 0 の~path区分

長さ 0 の~path区分は、 無効にされず，次の事例において描画に影響することになる： ◎ Path segments with zero length are not invalid, and will affect rendering in the following cases:

  • ~markerは、指定されているならば，適用-可能な どの頂点にも描かれる — 所与の頂点が長さ 0 の`~path区分$の終点であっても，`~moveto$pC ~commandが~~連続していても。 ◎ If markers are specified, then a marker is drawn on every applicable vertex, even if the given vertex is the end point of a zero-length path segment and even if "moveto" commands follow each other.
  • `§ 各種~stroke~prop＠~SVGpainting#StrokeProperties$に言及したとおり、 `stroke-linecap$p の値が［ `round^v ／`square^v ］のときには，長さ 0 の下位path用にも`~cap図形$を塗るモノトスル。 ◎ As mentioned in Stroke Properties, linecaps must be painted for zero-length subpaths when stroke-linecap has a value of round or square.

9.5.4. ~path~data内の~errorの取扱い

~path~data~streamの中の認識できない内容 （すなわち、~path~data文法の一部を成さない内容） は、~errorになるとする。 そのような事例では、 ~SVG~UAは，次の~error取扱い規則を利用するモノトスル： ◎ Unrecognized contents within a path data stream (i.e., contents that are not part of the path data grammar) is an error. In such a case, the following error-handling rules must be used:

  • 一般に、 `path$e 要素において，その~path~data指定に~errorがある場合、 最初の~errorを包含している~path~commandの直前まで描画する。 これは、~path~data指定~内のどこかにあり得る~errorについて， 利用者や開発者に視覚的な手がかりを供することになる。 この規則により、妥当でない~SVG~path~dataの生成は大幅に~~抑制されることになる。 ◎ The general rule for error handling in path data is that the SVG user agent shall render a ‘path’ element up to (but not including) the path command containing the first error in the path data specification. This will provide a visual clue to the user or developer about where the error might be in the path data specification. This rule will greatly discourage generation of invalid SVG path data.
  • 所与の~path~data~commandが包含する~parameterのどれかが不正である場合、 正しく定義された最後の`~path区分$まで描画する — その`~path区分$が［ いくつかの座標~pairを伴う `~lineto$pC などの複合-~path~data~command ］の下位-成分であっても。 例えば、 `L^pc ~command用には偶数個の~parameterが要求されるが，~path~data文字列 `M 10,10 L 20,20,30^l のように奇数個ある場合、 ~UAには，線を ( 10,10 ) から ( 20,20 ) まで描いた上で~errorを報告することが要求される — `L 20 20^l は、~path~data指定~内で正しく定義された~~部分を成す最後の区分なので。 ◎ If a path data command contains an incorrect set of parameters, then the given path data command is rendered up to and including the last correctly defined path segment, even if that path segment is a sub-component of a compound path data command, such as a "lineto" with several pairs of coordinates. For example, for the path data string 'M 10,10 L 20,20,30', there is an odd number of parameters for the "L" command, which requires an even number of parameters. The user agent is required to draw the line from (10,10) to (20,20) and then perform error reporting since 'L 20 20' is the last correctly defined segment of the path data specification.
  • アリな所ではすべての~errorを利用者に報告する。 ◎ Wherever possible, all SVG user agents shall report all errors to the user.

9.6. ~pathに沿う距離

［ `~path上の~text$, `~motion~animation$, `~stroke演算＠~SVGpainting#StrokeProperties$ ］などの各種~演算は、 `path$e などの~graphics要素の幾何に沿って距離を算出することを~UAに要求する。 ◎ Various operations, including text on a path and motion animation and various stroke operations, require that the user agent compute the distance along the geometry of a graphics element, such as a ‘path’.

~pathに沿う距離を算出するための正確な数学は存在するが、 公式は~~高度に複階的で，かなりの計算量が要求される。 著作~製品や~UAには，アリな限り精確な結果を生産する~algoを使役することが推奨されるが、［ 作者が各~実装の相違に~~適応する ／ 距離~計算から生産される結果を作者の意図に近似させ易くする ］ためとして， `pathLength$a 属性を利用できる。 `pathLength$a 属性は、 作者の算出による【言い換えれば、作者が定義する】~pathの総~長さを供する — ~UAは、この総~長さと［ 自身が~pathの総~長さ用に算出した値 ］の比率で，~pathに沿う距離の算出結果を拡縮できる。 ◎ Exact mathematics exist for computing distance along a path, but the formulas are highly complex and require substantial computation. It is recommended that authoring products and user agents employ algorithms that produce as precise results as possible; however, to accommodate implementation differences and to help distance calculations produce results that approximate author intent, the ‘pathLength’ attribute can be used to provide the author's computation of the total length of the path so that the user agent can scale distance-along-a-path computations by the ratio of ‘pathLength’ to the user agent's own computed value for total path length.

`path$e 要素の中の `~moveto$pC 演算は、 長さ 0 と定義される。 ~path長さの計算に寄与するものは、 各種［ `~lineto$pC, `~curveto$pC, `~arcto$pC ］~commandに限られる。 ◎ A "moveto" operation within a ‘path’ element is defined to have zero length. Only the various "lineto", "curveto" and "arcto" commands contribute to path length calculations.

9.6.1. `pathLength^a 属性

◎属名 `pathLength@a ◎属値 `number$t ◎属初 （ナシ） ◎属ア 可 ◎表終 ◎ Name Value Initial value Animatable pathLength <number> (none) yes
利用元~単位による，作者による~pathの総~長さの算出結果。 この値は、 ~UAによる`~pathに沿う距離$の算出結果を， 作者による算出結果で較正するために利用される。 ~UAは、すべての~pathに沿う距離の算出を，［ 自身が~pathの総~長さ用に算出した自前の値を， `pathLength$a 値が占める比率 ］で拡縮することになる。 `pathLength$a は、［ `~path上の~text$ ／ `~motion~animation$ ／ `~stroke演算＠~SVGpainting#StrokeProperties$ ］用の計算に影響し得る。 ◎ The author's computation of the total length of the path, in user units. This value is used to calibrate the user agent's own distance-along-a-path calculations with that of the author. The user agent will scale all distance-along-a-path computations by the ratio of ‘pathLength’ to the user agent's own computed value for total path length. ‘pathLength’ potentially affects calculations for text on a path, motion animation and various stroke operations.
値 0 は妥当であり、 拡縮~係数 正な無限大として扱うモノトスル。 無限に拡縮した結果は、［ 値 0 に対しては 0 のままであり続ける ／ 0 を超える百分率でない値に対しては、 正な無限大になる ］モノトスル ◎ A value of zero is valid and must be treated as a scaling factor of infinity. A value of zero scaled infinitely must remain zero, while any non-percentage value greater than zero must become +Infinity.
負な値は~errorになるとする（`~path~data内の~errorの取扱い$secを見よ）。 ◎ A negative value is an error (see Error handling).
`pathLength$a は、 百分率による`~pathに沿う距離$の計算に対しては，効果は無い。 ◎ ‘pathLength’ has no effect on percentage distance-along-a-path calculations.

9.7. ~DOM~interface

9.7.1. ~interface `SVGPathElement^I

`SVGPathElement$I ~objは、 ~DOM内で `path$e を表現する。 ◎ An SVGPathElement object represents a ‘path’ in the DOM. 

[Exposed=Window]
interface SVGPathElement : `SVGGeometryElement$I {
};