10.1. 序論と定義
`図形~要素@ （ `shape element^en, または単に図形（ `shape^en ））とは， 直線や曲線の組合nで定義される~graphics要素であり、 特定的には， `path$e 要素, および 次に挙げる `基本~図形@ （ `basic shape^en ）がある： ◎ basic shape shape shape elements A graphics element that is defined by some combination of straight lines and curves. Specifically: ‘circle’, ‘ellipse’, ‘line’, ‘path’, ‘polygon’, ‘polyline’ and ‘rect’. ◎ SVG contains the following set of basic shape elements:
- `rect$e 要素は、矩形を作成する — 任意選択で，隅を丸めることもできる。 ◎ rectangles (including optional rounded corners), created with the ‘rect’ element,
- `circle$e 要素は、真円を作成する。 ◎ circles, created with the ‘circle’ element,
- `ellipse$e 要素は、楕円を作成する。 ◎ ellipses, created with the ‘ellipse’ element,
- `line$e 要素は、直線を作成する。 ◎ straight lines, created with the ‘line’ element,
- `polyline$e 要素は、折線を作成する。 ◎ polylines, created with the ‘polyline’ element, and
- `polygon$e 要素は、多角形を作成する。 ◎ polygons, created with the ‘polygon’ element
これらの`基本~図形$は、 数学的には，同じ図形を構築する `path$e 要素に等価になる。 基本~図形は、 `path$e 要素と同じように~strokeされ, ~fillされ, 切抜き~pathとして利用できる。 `path$e 要素に可用な すべての~propは、 基本~図形にも適用される。 ◎ Mathematically, these shape elements are equivalent to a ‘path’ element that would construct the same shape. The basic shapes may be stroked, filled and used as clip paths. All of the properties available for ‘path’ elements also apply to the basic shapes.
以下の各~図形~節では、 各種 図形~用の（変形される前における）数学的に`等価な~path$ — ~strokeを算出する~algo — も定義する。 ◎ The equivalent path and algorithm to compute the stroke for each shape are defined in the shape sections below.
【 この訳では、 `等価な~path$の定義を［ ~command~~文字と丸括弧で括った引数の並び ］で与えることにする。 例えば `M^pc( %x, %y ) は、 ~parameterに %x, %y を伴う`~moveto$pC ~command（絶対~座標）を表す。 引数の並びは、~path~data構文と同じ順序で表記される。 】
10.2. `rect^e 要素
`rect$e 要素は、 現在の`利用元~座標系$に軸が揃えられた矩形を定義する。 `幾何~prop$ `rx$p, `ry$p ともに 0 以外の値を設定すれば、 矩形を丸めることもできる。 ◎ The ‘rect’ element defines a rectangle which is axis-aligned with the current user coordinate system. Rounded rectangles can be achieved by setting non-zero values for the rx and ry geometric properties.
◎要素名 `rect@e ◎分類 `~graphics要素$, `描画-可能な要素$, `図形~要素$ ◎内容 任意個数, 任意順序の，次に挙げる要素 ⇒＃ `~animation要素$, `記述的~要素$, `塗り~server要素$, `clipPath$e, `marker$e, `mask$e, `script$e, `style$e ◎属性 `~ARIA属性$, `条件付き処理~属性$, `中核~属性$, `大域~event属性$, `文書~要素~event属性$, `呈示~属性$, `pathLength$a ◎幾何 `x$p, `y$p, `width$p, `height$p, `rx$p, `ry$p ◎界面 `SVGRectElement$I ◎表終［ `x$p ／ `y$p ］座標は、 現在の利用元~座標系における矩形の［ 左端／上端 ］辺を基準にする。 ◎ The x and y coordinates refer to the left and top edges of the rectangle, in the current user coordinate system.
［ `width$p ／ `height$p ］~propは、 矩形の［ 横幅 ／ 縦幅 ］を定義する。 両~propとも、 負な値は`無効な値$であり，`無視する$モノトスル。 どちらかの寸法の算出d値が 0 の場合、 要素の描画は不能化される。 ◎ The width and height properties define the overall width and height of the rectangle. A negative value for either property is invalid and must be ignored. A computed value of zero for either dimension disables rendering of the element.
丸められた矩形~用として、［ `rx$p／ `ry$p ］~propの算出d値が，矩形の隅を丸めるときに利用される楕円-弧の［ ~x軸 ／~y軸 ］半径を定義する。 矩形は、この弧を含めて上下, 左右とも対称になる。 隅の丸めが非対称な矩形は，この要素では作成できないので、 明示的に `path$e で図形を定義するよりない。 両~propとも、 負な値は`無効な値$であり，`無視する$モノトスル。 算出d値がどちらかの寸法で 0 になるか両~寸法とも `auto^v になる場合、 結果の矩形の隅は丸められない。 ◎ For rounded rectangles, the computed values of the rx and ry properties define the x- and y-axis radii of elliptical arcs used to round off the corners of the rectangle. The arc are always symmetrical along both horizontal and vertical axis; to create a rectangle with uneven corner rounding, define the shape explicitly with a ‘path’. A negative value for either property is invalid and must be ignored. A computed value of zero for either dimension, or a computed value of auto for both dimensions, results in a rectangle without corner rounding.
丸められた隅の［ ~x軸／~y軸 ］半径~用の使用~値は， （他の寸法からの値を利用して）暗黙的に決定されることもあり、 矩形を成す直線~区分の長さが決して負にならないよう，切詰ngの~subjectにもなる。 ［ `rx$p ／ `ry$p ］の使用~値は、 その算出d値［ %rx ／ %ry ］から次の手続きに従って決定される： ◎ The used values for the x- and y-axis rounded corner radii may be determined implicitly from the other dimension (using the auto value), and are also subject to clamping so that the lengths of the straight segments of the rectangle are never negative. The used values for rx and ry are determined from the computed values by following these steps in order:
- ~IF［ %rx ~EQ `auto^v ］~AND［ %ry ~EQ `auto^v ］ ⇒ ~RET ( 0, 0 ) （両~propとも `auto^v は初期~値なので、 これは，作者がどちらも［ 指定しなかった／妥当でない値を給した ］場合に生じる。 結果の隅は直角になる。） ◎ If both rx and ry have a computed value of auto (since auto is the initial value for both properties, this will also occur if neither are specified by the author or if all author-supplied values are invalid), then the used value of both rx and ry is 0. (This will result in square corners.)
- %width ~LET 矩形の使用 `width$p
- %height ~LET 矩形の使用 `height$p
-
次に従って，指定d値を絶対的な値に換算する：
- ~IF［ %rx は百分率である ］ ⇒ %rx ~SET %width を基準に %rx を解決した結果の絶対~長さ
- ~IF［ %ry は百分率である ］ ⇒ %ry ~SET %height を基準に %ry を解決した結果の絶対~長さ
- ~IF［ %ry ~EQ `auto^v ］ ⇒ %ry ~SET %rx
- ~IF［ %rx ~EQ `auto^v ］ ⇒ %rx ~SET %ry
- ~RET ( `min^op( %rx, %width ~DIV 2 ), `min^op( %ry, %height ~DIV 2 ) ) ◎ Finally, apply clamping to generate the used values: ◎ If the absolute rx (after the above steps) is greater than half of the used width, then the used value of rx is half of the used width. ◎ If the absolute ry (after the above steps) is greater than half of the used height, then the used value of ry is half of the used height. ◎ Otherwise, the used values of rx and ry are the absolute values computed previously.
`rect$e 要素に対応する`等価な~path$は、 いくつかの［ `~lineto$pC, `~arcto$pC ］~commandからなり，次に従う：
- ( %x, %y, %width, %height, %rx, %rx ) ~LET 順に，同名の幾何-~propに対し［ 上の, および`単位$secに指定される規則 ］に従って，利用元~単位による絶対的な使用~値に換算した結果
- ［ %rx ~GT 0 ］~AND［ %ry ~GT 0 ］の場合、 次の~commandを順に遂行する ⇒＃ `M^pc( %x ~PLUS %rx, %y ), `H^pc( %x ~PLUS %width ~MINUS %rx ), `A^pc( %rx, %ry, 0, 0, 1, %x ~PLUS %width, %y ~PLUS %ry ), `V^pc( %y ~PLUS %height ~MINUS %ry ), `A^pc( %rx, %ry, 0, 0, 1, %x ~PLUS %width ~MINUS %rx, %y ~PLUS %height ), `H^pc( %x ~PLUS %rx ), `A^pc( %rx, %ry, 0, 0, 1, %x, %y ~PLUS %height ~MINUS %ry ), `V^pc( %y ~PLUS %ry ), `A^pc( %rx, %ry, 0, 0, 1, %x ~PLUS %rx, %y ), `区分を完了して~pathを閉じる$
- 他の場合、 次の~commandを順に遂行する ⇒＃ `M^pc( %x, %y ), `H^pc( %x ~PLUS %width ), `V^pc( %y ~PLUS %height ), `H^pc( %x ), `~closepath$pC
`Path decomposition resolved during teleconference on June 3rd, 2013.^en （`~~参照先＠http://www.w3.org/2013/06/03-svg-minutes.html#item03$） ◎ Path decomposition resolved during teleconference on June 3rd, 2013.
例 `rect01@xl は、 隅を丸めない `rect$e 要素を指定する。 矩形は `yellow^v で~fillされ, `navy^v で~strokeされる。 ◎ Example rect01 shows a rectangle with sharp corners. The ‘rect’ element is filled with yellow and stroked with navy.
<?xml version="1.0" standalone="no"?> <svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.1" > <desc> 例 `rect01^xl — 隅を丸めない矩形 ◎ Example rect01 - rectangle with sharp corners </desc> <!-- 表示域の外形線を示す `rect^e 要素 ◎ Show outline of viewport using 'rect' element --> <rect x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2" /> <rect x="400" y="100" width="400" height="200" fill="yellow" stroke="navy" stroke-width="10" /> </svg>
隅を丸めない矩形 ◎ Example rect01 — rectangle with sharp corners
例 `rect02@xl は、 2 個の丸められた矩形からなる。 `rx$p は矩形の隅をどう丸めるかを指定する。 `ry$p 属性には値が指定されていないので、 その使用~値は `rx$p 属性から導出されることに注意。 ◎ Example rect02 shows two rounded rectangles. The rx specifies how to round the corners of the rectangles. Note that since no value has been specified for the ry attribute, the used value will be derived from the rx attribute.
<?xml version="1.0" standalone="no"?> <svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.1" > <desc> 例 `rect02^xl — 丸められた矩形 ◎ Example rect02 - rounded rectangles </desc> <!-- 表示域の外形線を示す `rect^e 要素 ◎ Show outline of viewport using 'rect' element --> <rect x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2" /> <rect x="100" y="100" width="400" height="200" rx="50" fill="green" /> <g transform="translate(700 210) rotate(-30)"> <rect x="0" y="0" width="400" height="200" rx="50" fill="none" stroke="purple" stroke-width="30" /> </g> </svg>
隅が丸められ，利用元~座標で表出される矩形 ◎ Example rect02 — rounded rectangles expressed in user coordinates
10.3. `circle^e 要素
`circle$e 要素は、 中心~点と半径に基づいて，真円を定義する。 ◎ The ‘circle’ element defines a circle based on a center point and a radius.
◎要素名 `circle@e ◎分類 `~graphics要素$, `描画-可能な要素$, `図形~要素$ ◎内容 任意個数, 任意順序の，次に挙げる要素 ⇒＃ `~animation要素$, `記述的~要素$, `塗り~server要素$, `clipPath$e, `marker$e, `mask$e, `script$e, `style$e ◎属性 `~ARIA属性$, `条件付き処理~属性$, `中核~属性$, `大域~event属性$, `文書~要素~event属性$, `呈示~属性$, `pathLength$a ◎幾何 `cx$p, `cy$p, `r$p ◎界面 `SVGCircleElement$I ◎表終［ `cx$p, `cy$p ］~propは、 真円の中心の座標を定義する。 ◎ The cx and cy attributes define the coordinates of the center of the circle.
`r$p ~propは、 真円の半径を定義する。 負な値は`無効な値$であり，`無視する$モノトスル。 算出d値は 0 の場合、 要素の描画は不能化される。 ◎ The r attribute defines the radius of the circle. A negative value is invalid and must be ignored. A computed value of zero disables rendering of the element.
`circle$e 要素に対応する`等価な~path$は、 `ellipse$e 要素に対応するそれと同様に定義される — その %rx, %ry ~parameterの両者に `r$p ~propの使用~値を与える下で。 【原文には，等価な~pathを作成する具体的な手順が与えられているが、 `ellipse^e のそれと重複するので，この訳では省略する。】 ◎ Mathematically, a ‘circle’ element is mapped to an equivalent ‘path’ element that consists of four elliptical arc segments, each covering a quarter of the circle. The path begins at the "3 o'clock" point on the radius and proceeds in a clock-wise direction (before any transformations). The rx and ry parameters to the arc commands are both equal to the used value of the r property, after conversion to local user units, while the x-axis-rotation, the large-arc-flag, and the sweep-flag are all set to zero. The coordinates are computed as follows, where cx, cy, and r are the used values of the equivalent properties, converted to user units: • A move-to command to the point cx+r,cy; • arc to cx,cy+r; • arc to cx-r,cy; • arc to cx,cy-r; • arc with a segment-completing close path operation.
`Path decomposition resolved during teleconference on June 3rd, 2013.^en （`~~参照先＠http://www.w3.org/2013/06/03-svg-minutes.html#item03$） ◎ Path decomposition resolved during teleconference on June 3rd, 2013.
例 `circle01@xl は、 `red^v で~fillされ, `blue^v で~strokeされる `circle$e 要素を指定する。 ◎ Example circle01 consists of a ‘circle’ element that is filled with red and stroked with blue.
<?xml version="1.0" standalone="no"?> <svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.1" > <desc> 例 `circle01^xl — 真円は `red^v で~fillされ, `blue^v で~strokeされる ◎ Example circle01 - circle filled with red and stroked with blue </desc> <!-- 表示域の外形線を示す `rect^e 要素 ◎ Show outline of viewport using 'rect' element --> <rect x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2" /> <circle cx="600" cy="200" r="100" fill="red" stroke="blue" stroke-width="10" /> </svg>
~redで~fillされ, ~blueで~strokeされた真円 ◎ Example circle01 — circle filled with red and stroked with blue
10.4. `ellipse^e 要素
`ellipse$e 要素は、 楕円を定義する — それは、中心~点と 2 個の半径に基づき，現在の`利用元~座標系$に軸が揃えられる。 ◎ The ‘ellipse’ element defines an ellipse which is axis-aligned with the current user coordinate system based on a center point and two radii.
◎要素名 `ellipse@e ◎分類 `~graphics要素$, `描画-可能な要素$, `図形~要素$ ◎内容 任意個数, 任意順序の，次に挙げる要素 ⇒＃ `~animation要素$, `記述的~要素$, `塗り~server要素$, `clipPath$e, `marker$e, `mask$e, `script$e, `style$e ◎属性 `~ARIA属性$, `条件付き処理~属性$, `中核~属性$, `大域~event属性$, `文書~要素~event属性$, `呈示~属性$, `pathLength$a ◎幾何 `cx$p, `cy$p, `rx$p, `ry$p ◎界面 `SVGEllipseElement$I ◎表終( `cx$p, `cy$p ) 座標は、 楕円の中心を定義する。 ◎ The cx and cy coordinates define the center of the ellipse.
［ `rx$p ／ `ry$p ］~propは、 楕円の［ ~x ／ ~y ］軸~半径を定義する。 両~propとも、 負な値は`無効な値$であり，`無視する$モノトスル。 ［ どちらかの寸法の算出d値は 0 ／ 両~寸法とも算出d値は `auto^v ］の場合、 要素の描画は不能化される。 ◎ The rx and ry properties define the x- and y-axis radii of the ellipse. A negative value for either property is invalid and must be ignored. A computed value of zero for either dimension, or a computed value of auto for both dimensions, disables rendering of the element.
［ `rx$p ／ `ry$p ］用の値 `auto^v は、 上で与えた矩形~用の規則に従って使用~値に変換される （ただし、［ `width$p, `height$p ］に基づく切詰ngなしに）。 片方の~propに対する値 `auto^v は、 実質的に，真円な図形を作成する — その半径は、 もう片方の~propの寸法により表出される値で定義される。 これにより、もう片方を百分率~値にすれば，表示域の［ 横幅／縦幅 ］に相対的な［ ~x軸／~y軸 ］半径（`単位$secを見よ）を伴う真円を作成できる。 【その一方， `circle^e の `r$p ~propに対する百分率は、`正規化-済み対角線長さ$を基準にする。】 ◎ An auto value for either rx or ry is converted to a used value, following the rules given above for rectangles (but without any clamping based on width or height). Effectively, an auto value creates a circular shape whose radius is defined by a value expressed solely in one dimension; this allows for creating a circle with a radius defined in terms of one of the following: • a percentage of the coordinate system width; that is, a percentage value for rx and an auto value for ry. • a percentage of the coordinate system height; that is, an auto value for rx and a percentage value for ry.
注記： ［ `rx$p ／ `ry$p ］用の `auto^v 値は、 ~SVG-2にて新たに追加された — これらの~propの構文解析が楕円, 矩形の両者で一貫させるために。 以前までは、［ `rx^p, `ry^p ］どちらかが未指定な場合，楕円は描画されなかった。 ◎ New in SVG 2. The auto value for rx and ry was added to allow consistent parsing of these properties for both ellipses and rectangles. Previously, if either rx or ry was unspecified, the ellipse would not render.
`ellipse$e 要素に対応する`等価な~path$は、以下に従う。 それは、 それぞれ真円の四分の一を受持つ 4 個の `~arcto$pC ~commandからなり， ~~円周~上の “三時”の地点から始まり，時計回りに進行する — これらの~commandの［ %x-axis-rotation, %large-arc-flag, %sweep-flag ］~parameterはいずれも 0 に設定される： ◎ Mathematically, an ‘ellipse’ element is mapped to an equivalent ‘path’ element that consists of four elliptical arc segments, each covering a quarter of the ellipse. The path begins at the "3 o'clock" point on the radius and proceeds in a clock-wise direction (before any transformation). The rx and ry parameters to the arc commands are the used values of the equivalent properties after conversion to local user units, while the x-axis-rotation, the large-arc-flag, and the sweep-flag are all set to zero.＼
- ( %cx, %cy, %rx, %ry ) ~LET 順に［ `cx$p, `cy$p, `rx$p, `ry$p ］~propの使用~値を利用元~単位に換算した結果 ◎ The coordinates are computed as follows, where cx, cy, rx, and ry are the used values of the equivalent properties, converted to user units:
- 次の~commandを順に遂行する ⇒＃ `M^pc( %cx ~PLUS %rx, %cy ), `A^pc( %rx, %ry, 0, 0, 0, %cx, %cy ~PLUS %ry ), `A^pc( %rx, %ry, 0, 0, 0, %cx ~MINUS %rx, %cy ), `A^pc( %rx, %ry, 0, 0, 0, %cx, %cy ~MINUS %ry ), `A^pc( %rx, %ry, 0, 0, 0, %cx ~PLUS %rx, %cy ), `区分を完了して~pathを閉じる$ ◎ A move-to command to the point cx+rx,cy; ◎ arc to cx,cy+ry; ◎ arc to cx-rx,cy; ◎ arc to cx,cy-ry; ◎ arc with a segment-completing close path operation.
`Path decomposition resolved during teleconference on June 3rd, 2013.^en （`~~参照先＠http://www.w3.org/2013/06/03-svg-minutes.html#item03$） ◎ Path decomposition resolved during teleconference on June 3rd, 2013.
例 `ellipse01^xl は、 2 個の楕円の座標を指定する — ［ `svg$e 要素~上の `viewBox$a 属性, `g$e, `ellipse$e 要素の `transform$p ~prop ］により確立された利用元~座標系において。 両~楕円とも，既定の値 0 を `cx$p, `cy$p 属性（楕円の中心）用に利用する。 2 個目の楕円は回転される。 ◎ Example ellipse01 below specifies the coordinates of the two ellipses in the user coordinate system established by the ‘viewBox’ attribute on the ‘svg’ element and the transform property on the ‘g’ and ‘ellipse’ elements. Both ellipses use the default values of zero for the cx and cy attributes (the center of the ellipse). The second ellipse is rotated.
<?xml version="1.0" standalone="no"?> <svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.1" > <desc> 例 `ellipse01^xl — 楕円の例 ◎ Example ellipse01 - examples of ellipses </desc> <!-- 表示域の外形線を示す `rect^e 要素 ◎ Show outline of viewport using 'rect' element --> <rect x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2" /> <g transform="translate(300 200)"> <ellipse rx="250" ry="100" fill="red" /> </g> <ellipse transform="translate(900 200) rotate(-30)" rx="250" ry="100" fill="none" stroke="blue" stroke-width="20" /> </svg>
利用元~座標で表出された楕円 ◎ Example ellipse01 — ellipses expressed in user coordinates
10.5. `line^e 要素
`line$e 要素は、 ある点から開始して別の点で終端する線~区分を定義する。 ◎ The ‘line’ element defines a line segment that starts at one point and ends at another.
◎要素名 `line@e ◎分類 `~graphics要素$, `描画-可能な要素$, `図形~要素$ ◎内容 任意個数, 任意順序の，次に挙げる要素 ⇒＃ `~animation要素$, `記述的~要素$, `塗り~server要素$, `clipPath$e, `marker$e, `mask$e, `script$e, `style$e ◎属性 `~ARIA属性$, `条件付き処理~属性$, `中核~属性$, `大域~event属性$, `文書~要素~event属性$, `呈示~属性$, `pathLength$a, `x1$a, `y1$a, `x2$a, `y2$a ◎界面 `SVGLineElement$I ◎表終 ~attrdef- ◎属名 `x1@a, `y1@a ◎属値 `length-percentage$t | `number$t ◎属初 0 ◎属ア 可 ◎表終 ◎ Name Value Initial value Animatable x1, y1 <length-percentage> | <number> 0 yes
- 順に，線の始端の［ ~x座標, ~y座標 ］を与える。 ◎ The x- and y-axis coordinates of the start of the line.
- ◎属名 `x2@a, `y2@a ◎属値 `length-percentage$t | `number$t ◎属初 0 ◎属ア 可 ◎表終 ◎ Name Value Initial value Animatable x2, y2 <length-percentage> | <number> 0 yes
- 順に，線の終端の［ ~x座標, ~y座標 ］を与える。 ◎ The x- and y-axis coordinates of the end of the line.
注記： 将来の仕様は［ `x1$a, `y1$a, `x2$a, `y2$a ］属性を`幾何~prop$に変換し得る。 現時点では、~CSSを介しては指定できず，要素の属性を介する他にない。 ◎ A future specification may convert the ‘x1’, ‘y1’, ‘x2’, and ‘y2’ attributes to geometric properties. Currently, they can only be specified via element attributes, and not CSS.
`line$e 要素に対応する`等価な~path$は、 `~lineto$pC ~commandからなり，次に従う： ◎ Mathematically, a ‘line’ element can be mapped to an equivalent ‘path’ element as follows,＼
- ( %x1, %y1, %x2, %y2 ) ~LET 順に［ `x1$a, `y1$a, `x2$a, `y2$a ］属性の値を，`単位$secに則って，利用元~座標系の`利用元~単位$による絶対的な使用~値に換算した結果 ◎ after converting coordinates into user coordinate system user units according to Units to generate values x1, y1, x2, and y2:
- 次の~commandを順に遂行する ⇒＃ `M^pc( %x1, %y1 ), `L^pc( %x2, %y2 ) ◎ perform an absolute moveto operation to absolute location (x1,y1) ◎ perform an absolute lineto operation to absolute location (x2,y2)
`line$e 要素は、 単独の線であり，幾何的には一次元なので、 内域は無く，~fillされることは決してない（ `fill$p ~propを見よ）。 ◎ Because ‘line’ elements are single lines and thus are geometrically one-dimensional, they have no interior; thus, ‘line’ elements are never filled (see the fill property).
下の例 `line01@xl は、 5 本の線の座標を指定する — `svg$e 要素~上の `viewBox$a 属性により確立された利用元~座標系における。 各~線の太さはそれぞれに異なる。 ◎ Example line01 below specifies the coordinates of the five lines in the user coordinate system established by the ‘viewBox’ attribute on the ‘svg’ element. The lines have different thicknesses.
<?xml version="1.0" standalone="no"?> <svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.1" > <desc> 例 `line01^xl — 利用元~座標で表出される線 ◎ Example line01 - lines expressed in user coordinates </desc> <!-- 表示域の外形線を示す `rect^e 要素 ◎ Show outline of viewport using 'rect' element --> <rect x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2" /> <g stroke="green"> <line x1="100" y1="300" x2="300" y2="100" stroke-width="5" /> <line x1="300" y1="300" x2="500" y2="100" stroke-width="10" /> <line x1="500" y1="300" x2="700" y2="100" stroke-width="15" /> <line x1="700" y1="300" x2="900" y2="100" stroke-width="20" /> <line x1="900" y1="300" x2="1100" y2="100" stroke-width="25" /> </g> </svg>
利用元~座標で表出された線 ◎ Example line01 — lines expressed in user coordinates
10.6. `polyline^e 要素
`polyline$e 要素は、 接続された一連の直線~区分を定義する。 `polyline$e 要素は、 概して，開な図形を定義する。 ◎ The ‘polyline’ element defines a set of connected straight line segments. Typically, ‘polyline’ elements define open shapes.
◎要素名 `polyline@e ◎分類 `~graphics要素$, `描画-可能な要素$, `図形~要素$ ◎内容 任意個数, 任意順序の，次に挙げる要素 ⇒＃ `~animation要素$, `記述的~要素$, `塗り~server要素$, `clipPath$e, `marker$e, `mask$e, `script$e, `style$e ◎属性 `~ARIA属性$, `条件付き処理~属性$, `中核~属性$, `大域~event属性$, `文書~要素~event属性$, `呈示~属性$, `pathLength$a, `~pointsL$a ◎界面 `SVGPolylineElement$I ◎表終 ~attrdef- ◎属名 `~pointsL@a ◎属値 `points$t ◎属初 （ナシ） ◎属ア 可 ◎表終 ◎ Name Value Initial value Animatable points <points> (none) yes ◎ where:
-
`points@t = [ `number$t+ ]#
- 折線を成す 1 個以上の点を与える。 すべての座標~値は利用元~座標系~内にある。 ◎ The points that make up the polyline. All coordinate values are in the user coordinate system.
- 供された座標~値が奇数個ある場合、 要素は~errorとされ， `path$e 要素にて不正に指定されたときと同じに挙動する — そのような~error事例においては、 ~UAは，最後の奇数個目の座標を落とした上で図形を描画することになる。 ◎ If an odd number of coordinates is provided, then the element is in error, with the same user agent behavior as occurs with an incorrectly specified ‘path’ element. In such error cases the user agent will drop the last, odd coordinate and otherwise render the shape.
- 初期~値 `none^v は、 妥当であるが，要素は描画しないことを指示する。 ◎ The initial value, (none), indicates that the polyline element is valid but does not render.
注記： 将来の仕様は `~pointsL$a 属性を`幾何~prop$に変換し得る。 現時点では、~CSSを介しては指定できず，要素の属性を介する他にない。 ◎ A future specification may convert the ‘points’ attribute to a geometric property. Currently, it can only be specified via an element attribute, and not CSS.
`polyline$e 要素に対応する`等価な~path$は、 いくつかの `~lineto$pC ~commandからなり，次に従う： ◎ Mathematically, a ‘polyline’ element can be mapped to an equivalent ‘path’ element as follows:
- `points$t を成す最初の座標~pair ( %x, %y ) に対し，次の~commandを遂行する ⇒ `M^pc( %x, %y ) ◎ perform an absolute moveto operation to the first coordinate pair in the list of points
- `points$t を成す後続な各~座標~pair ( %x, %y ) に対し順に，次の~commandを遂行する ⇒ `L^pc( %x, %y ) ◎ for each subsequent coordinate pair, perform an absolute lineto operation to that coordinate pair.
下の例 `polyline01@xl は、折線を指定する — `svg$e 要素~上の `viewBox$a 属性により確立された利用元~座標系における。 ◎ Example polyline01 below specifies a polyline in the user coordinate system established by the ‘viewBox’ attribute on the ‘svg’ element.
<?xml version="1.0" standalone="no"?> <svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.1" > <desc> 例 `polyline01^xl — ~~段々大きくなる~~突起 ◎ Example polyline01 - increasingly larger bars </desc> <!-- 表示域の外形線を示す `rect^e 要素 ◎ Show outline of viewport using 'rect' element --> <rect x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2" /> <polyline fill="none" stroke="blue" stroke-width="10" points="50,375 150,375 150,325 250,325 250,375 350,375 350,250 450,250 450,375 550,375 550,175 650,175 650,375 750,375 750,100 850,100 850,375 950,375 950,25 1050,25 1050,375 1150,375" /> </svg>
~~段々大きくなる~~突起 ◎ Example polyline01 — increasingly larger bars
10.7. `polygon^e 要素
`polygon$e 要素は、 接続された一連の直線~区分からなる閉な図形を定義する。 ◎ The ‘polygon’ element defines a closed shape consisting of a set of connected straight line segments.
◎要素名 `polygon@e ◎分類 `~graphics要素$, `描画-可能な要素$, `図形~要素$ ◎内容 任意個数, 任意順序の，次に挙げる要素 ⇒＃ `~animation要素$, `記述的~要素$, `塗り~server要素$, `clipPath$e, `marker$e, `mask$e, `script$e, `style$e ◎属性 `~ARIA属性$, `条件付き処理~属性$, `中核~属性$, `大域~event属性$, `文書~要素~event属性$, `呈示~属性$, `pathLength$a, `points$a ◎界面 `SVGPolygonElement$I ◎表終 ~attrdef- ◎属名 `points@a ◎属値 `points$t ◎属初 （ナシ） ◎属ア 可 ◎表終 ◎ Name Value Initial value Animatable points <points> (none) yes
- 多角形を成す 1 個以上の点を与える。 すべての座標~値は利用元~座標系~内にあるとする。 ◎ The points that make up the polygon. All coordinate values are in the user coordinate system.
- 供された座標~値が奇数個ある場合、 要素は~errorとされ， `path$e 要素にて不正に指定されたときと同じに挙動する。 ◎ If an odd number of coordinates is provided, then the element is in error, with the same user agent behavior as occurs with an incorrectly specified ‘path’ element.
- 初期~値 `none^v は、 妥当であるが，要素は描画しないことを指示する。 ◎ The initial value, (none), indicates that the polygon element is valid, but does not render.
注記： 将来の仕様は `points$a 属性を`幾何~prop$に変換し得る。 現時点では、~CSSを介しては指定できず，要素の属性を介する他にない。 ◎ A future specification may convert the ‘points’ attribute to a geometric property. Currently, it can only be specified via an element attribute, and not CSS.
`polygon$e 要素に対応する`等価な~path$は、次に従う： ◎ Mathematically, a ‘polygon’ element can be mapped to an equivalent ‘path’ element as follows:
- `polyline$e 要素に定義される`等価な~path$と同じ演算を遂行する ◎ perform an absolute moveto operation to the first coordinate pair in the list of points ◎ for each subsequent coordinate pair, perform an absolute lineto operation to that coordinate pair
- `~closepath$pC ~commandを遂行する ◎ perform a closepath command
下の例 `polygon01@xl は、 2 個の多角形（星形と六角形）を指定する — `svg$e 要素~上の `viewBox$a 属性により確立された利用元~座標系において。 ◎ Example polygon01 below specifies two polygons (a star and a hexagon) in the user coordinate system established by the ‘viewBox’ attribute on the ‘svg’ element.
<?xml version="1.0" standalone="no"?> <svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.1" > <desc> 例 `polygon01^xl — 星形と六角形 ◎ Example polygon01 - star and hexagon </desc> <!-- 表示域の外形線を示す `rect^e 要素 ◎ Show outline of viewport using 'rect' element --> <rect x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2" /> <polygon fill="red" stroke="blue" stroke-width="10" points="350,75 379,161 469,161 397,215 423,301 350,250 277,301 303,215 231,161 321,161" /> <polygon fill="lime" stroke="blue" stroke-width="10" points="850,75 958,137.5 958,262.5 850,325 742,262.6 742,137.5" /> </svg>
星形と六角形 ◎ Example polygon01 — star and hexagon
10.8. ~DOM ~interface
10.8.1. ~interface `SVGRectElement^I0
`SVGRectElement$I ~objは、 ~DOMにおいて `rect$e 要素を表現する。 ◎ An SVGRectElement object represents a ‘rect’ element in the DOM.
[Exposed=Window]
interface `SVGRectElement^I : `SVGGeometryElement$I {
[SameObject] readonly attribute `SVGAnimatedLength$I `x$m;
[SameObject] readonly attribute `SVGAnimatedLength$I `y$m;
[SameObject] readonly attribute `SVGAnimatedLength$I `width$m;
[SameObject] readonly attribute `SVGAnimatedLength$I `height$m;
[SameObject] readonly attribute `SVGAnimatedLength$I `rx$m;
[SameObject] readonly attribute `SVGAnimatedLength$I `ry$m;
};
［ `x@m, `y@m, `width@m, `height@m, `rx@m, `ry@m ］~IDL属性は、 順に［ `x$p, `y$p, `width$p, `height$p, `rx$p, `ry$p ］~propの［ 算出d値, および それぞれに対応する呈示~属性 ］を`反映する$。 ◎ The x, y, width, height, rx and ry IDL attributes reflect the computed values of the x, y, width, height, rx and ry properties and their corresponding presentation attributes, respectively.
10.8.2. ~interface `SVGCircleElement^I0
`SVGCircleElement$I ~objは、 ~DOMにおいて `circle$e 要素を表現する。 ◎ An SVGCircleElement object represents a ‘circle’ element in the DOM.
[Exposed=Window]
interface `SVGCircleElement^I : `SVGGeometryElement$I {
[SameObject] readonly attribute `SVGAnimatedLength$I `cx$m;
[SameObject] readonly attribute `SVGAnimatedLength$I `cy$m;
[SameObject] readonly attribute `SVGAnimatedLength$I `r$m;
};
［ `cx@m, `cy@m, `r@m ］~IDL属性は、 順に［ `cx$p, `cy$p, `y$p ］~propの［ 算出d値, および それぞれに対応する呈示~属性 ］を`反映する$。 ◎ The cx, cy and r IDL attributes reflect the computed values of the cx, cy and y properties and their corresponding presentation attributes, respectively.
10.8.3. ~interface `SVGEllipseElement^I0
`SVGEllipseElement$I ~objは、 ~DOMにおいて `ellipse$e 要素を表現する。 ◎ An SVGEllipseElement object represents a ‘ellipse’ element in the DOM.
[Exposed=Window]
interface `SVGEllipseElement^I : `SVGGeometryElement$I {
[SameObject] readonly attribute `SVGAnimatedLength$I `cx$m;
[SameObject] readonly attribute `SVGAnimatedLength$I `cy$m;
[SameObject] readonly attribute `SVGAnimatedLength$I `rx$m;
[SameObject] readonly attribute `SVGAnimatedLength$I `ry$m;
};
［ `cx@m, `cy@m, `rx@m, `ry@m ］~IDL属性は、 順に［ `cx$p, `cy$p, `rx$p, `ry$p ］~propの［ 算出d値, および それぞれに対応する呈示~属性 ］を`反映する$。 ◎ The cx, cy, rx and ry IDL attributes reflect the computed values of the cx, cy, rx and ry properties and their corresponding presentation attributes, respectively.
10.8.4. ~interface `SVGLineElement^I0
`SVGLineElement$I ~objは、 ~DOMにおいて `line$e 要素を表現する。 ◎ The SVGLineElement interface corresponds to the ‘line’ element.
[Exposed=Window]
interface `SVGLineElement^I : `SVGGeometryElement$I {
[SameObject] readonly attribute `SVGAnimatedLength$I `x1$m;
[SameObject] readonly attribute `SVGAnimatedLength$I `y1$m;
[SameObject] readonly attribute `SVGAnimatedLength$I `x2$m;
[SameObject] readonly attribute `SVGAnimatedLength$I `y2$m;
};
［ `x1@m, `y1@m, `x2@m, `y2@m ］~IDL属性は、 順に［ `x1$a, `y1$a, `x2$a, `y2$a ］内容~属性を`反映する$。 ◎ The x1, y1, x2 and y2 IDL attributes reflect the ‘x1’, ‘y1’, ‘x2’ and ‘y2’ content attributes, respectively
10.8.5. ~mixin `SVGAnimatedPoints^I0
`SVGAnimatedPoints$I ~interfaceは、［ `polygon$e ／ `polyline$e ］要素~上の `points$a 属性を`反映する$ときに利用される。 それは、［ `SVGPolygonElement$I ／ `SVGPolylineElement$I ］~interfaceに`内包され$る。 ◎ The SVGAnimatedPoints interface is used to reflect a ‘points’ attribute on a ‘polygon’ or ‘polyline’ element. It is mixed in to the SVGPolygonElement and SVGPolylineElement interfaces.
注記： ~SVG-11においては、 `animatedPoints$m 属性は，現在の~animateされた値を表現していた。 この~versionの~SVGにおいては、 単純に `points$m 用の別名になる【が、返される~objは読専になる】。 ◎ Note: In SVG 1.1 SE, the animatedPoints attribute represented the current animated value. In this version of SVG, it is simply an alias for points.
interface mixin `SVGAnimatedPoints^Ix {
[SameObject] readonly attribute `SVGPointList$I `points$m;
[SameObject] readonly attribute `SVGPointList$I `animatedPoints$m;
};
- `points@m
- コレの`反映先の属性$の`基底~値$を表現する。 ◎ The points and animatedPoints IDL attributes represent the current non-animated value of the reflected attribute.＼
- その取得子~手続きは、 コレの`反映を継承する$ `SVGPointList$I ~objを返す。 ◎ On getting points or animatedPoints, an SVGPointList object is returned that reflects the base value of the reflected attribute.
- `animatedPoints@m
- 取得子は、 `points$m 取得子と同じに挙動するが，結果の`読専~flag$も ~T にする。 ◎ ↑
10.8.6. ~interface `SVGPointList^I0
`SVGPointList$I ~interfaceは、 `~list~interface$であり， 0 個以上の `DOMPoint$I ~objからなる~listを表現する。 ◎ The SVGPointList interface is a list interface whose elements are DOMPoint objects. An SVGPointList object represents a list of points.
[Exposed=Window]
interface `SVGPointList^Ix {
readonly attribute unsigned long `length$m1;
readonly attribute unsigned long `numberOfItems$m1;
undefined `clear$m1();
`DOMPoint$I `initialize$m1(`DOMPoint$I %newItem);
getter `DOMPoint$I `getItem$m1(unsigned long %index);
`DOMPoint$I `insertItemBefore$m1(`DOMPoint$I %newItem, unsigned long %index);
`DOMPoint$I `replaceItem$m1(`DOMPoint$I %newItem, unsigned long %index);
`DOMPoint$I `removeItem$m1(unsigned long %index);
`DOMPoint$I `appendItem$m1(`DOMPoint$I %newItem);
`setter$m1 undefined (unsigned long index, `DOMPoint$I %newItem);
};
`SVGPointList$I ~interfaceを成すすべての~memberの挙動は、 `~list~interface$にて定義される。 ◎ The behavior of all of the interface members of SVGPointList are defined in List interfaces.
`DOMPoint$I ~objは、［ `points$a 属性を反映する／ ある `svg$e 要素の現在の並進を表現する ］ためにも利用され得る。 そのため，この仕様は、 それらの~objの挙動に対し，［ `読専~flag$, `反映を継承する$こと ］を通して `geometry-1$r に述べられるものを超える追加的な要件を課す。 ◎ This specification imposes additional requirements on the behaviour of DOMPoint objects beyond those described in the Geometry Interfaces specification, so that they can be used to reflect ‘points’ attributes. ◎ （反映を継承する／関連な要素に集約） Every DOMPoint object operates in one of three modes. It can: • reflect an element of the base value of a reflected animatable attribute (being exposed through the methods on the points member of an SVGAnimatedPoints), • represent the current translation of a given ‘svg’ element (being exposed through the currentTranslate member on SVGSVGElement), or • be detached, which is the case for DOMPoint objects created using their constructor or with createSVGPoint. ◎ A DOMPoint object can be associated with a particular element. The associated element is used to determine which element's content attribute to update if the object reflects an attribute. Unless otherwise described, a DOMPoint object is not associated with any element.
【！id=PointMode／PointAssociatedElement／ReadOnlyPoint】`DOMPoint$I ~objの`読専~flag$は、 ~T にされ得る。 その場合，~objを改変する — ［ `x$n, `y$n, `w$n, `z$n ］~IDL属性に値をアテガう — 試みに対しては、 内部的な座標~値を更新することなく， `NoModificationAllowedError$E 例外が投出されることになる。 ◎ A DOMPoint object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown. When assigning to a read only DOMPoint's x, y, w or z IDL attribute, a NoModificationAllowedError must be thrown instead of updating the internal coordinate value.
注記： `DOMPointReadOnly$I ~interfaceには、 これは適用されないことに注意。 それは、 `points$a 属性を反映するために利用されることはない。 それは，元から読専であり，改変しようとするどの試みに対しても例外を投出する。 ◎ Note that this applies only to the read-write DOMPoint interface; the DOMPointReadOnly interface, which is not used for reflecting the ‘points’ attribute, will already throw an exception if an attempt is made to modify it.
`DOMPoint$I %P が［ `読専~flag$ ~EQ ~F ］の下で［ `x$n, `y$n, `w$n, `z$n ］~IDL属性にアテガうことにより、 内部的な座標~値が更新されたときは，次の手続きを走らす： ◎ When assigning to a writable DOMPoint's x, y, w or z IDL attribute, the following steps are run after updating the internal coordinate value:
- ~IF［ %P は `SVGSVGElement$I1 の `currentTranslate$m1 から返された~objでない ］ ⇒＃ `必要なら内容~属性を直列化し直す$( %P )； ~RET ◎ If the DOMPoint reflects an element of the base value of a reflected attribute, then reserialize the reflected attribute using the SVGPointList that reflects the attribute's base value.
- ~Assert： %P は`最外縁の~svg要素$である `svg$e 要素 %svg の現在の並進を表現する ◎ Otherwise, if the DOMPoint represents the current translation of an ‘svg’ element and that element is the outermost svg element, then:
- [ %a 0 0 %a %e %f ] ~LET %svg が成す~SVG文書片の［ 拡大表示, ~pan法 ］を与える変形を表現する~2x3行列 ◎ Let [a b c d e f] be the 2x3 matrix that represents the document's magnification and panning transform.
- ( %x, %y ) ~LET `DOMPoint$I ~objの ( x, y ) 座標 ◎ Let x and y be the x and y coordinates of the DOMPoint object, respectively.
- %svg が成す~SVG文書片の［ 拡大表示, ~pan法 ］を与える変形 ~SET [ %a 0 0 %a %x %y ] ◎ Set the document's magnification and panning transform to [a 0 0 d x y].
10.8.7. ~interface `SVGPolylineElement^I0
`SVGPolylineElement$I ~objは、 ~DOMにおいて `polyline$e 要素を表現する。 ◎ An SVGPolylineElement object represents a ‘polyline’ element in the DOM.
[Exposed=Window]
interface `SVGPolylineElement^I : `SVGGeometryElement$I {
};
`SVGPolylineElement$I includes `SVGAnimatedPoints$I;
10.8.8. ~interface `SVGPolygonElement^I0
`SVGPolygonElement$I ~objは、 ~DOMにおいて `polygon$e 要素を表現する。 ◎ An SVGPolygonElement object represents a ‘polygon’ element in the DOM.
[Exposed=Window]
interface `SVGPolygonElement^I : `SVGGeometryElement$I {
};
`SVGPolygonElement$I includes `SVGAnimatedPoints$I;