第10章：基本図形
目次
10.1. はじめにと定義10.2. ‘rect’ 要素10.3. ‘circle’ 要素10.4. ‘ellipse’ 要素10.5. ‘line’ 要素10.6. ‘polyline’ 要素10.7. ‘polygon’ 要素10.8. DOMインターフェース
10.8.1.
インターフェース SVGRectElement10.8.2.
インターフェース SVGCircleElement10.8.3.
インターフェース SVGEllipseElement10.8.4.
インターフェース SVGLineElement10.8.5.
ミックスイン SVGAnimatedPoints10.8.6. インターフェース
SVGPointList10.8.7.
インターフェース SVGPolylineElement10.8.8.
インターフェース SVGPolygonElement
10.1. はじめにと定義
基本図形 図形
図形要素 直線と曲線の組み合わせで定義されるグラフィック要素。具体的には、
‘circle 、‘ellipse 、‘line 、‘path 、‘polygon 、‘polyline 、‘rect です。
SVGには次の基本図形要素があります：
数学的には、これらの図形要素は同じ形状を構成する ‘path 要素と同等です。
基本図形はストロークや塗り、クリップパスとして利用できます。‘path 要素で使用可能なすべてのプロパティは、これら基本図形にも適用されます。
同等のパス および各図形のストローク計算アルゴリズムは、下記の図形節で定義されています。
10.2. ‘rect’ 要素
‘rect 要素は、現在の ユーザー座標系 に軸揃えされた矩形を定義します。
rx および ry 幾何プロパティに 0 以外の値を設定することで角の丸い矩形が作れます。
‘rect ’
カテゴリ:
グラフィック要素 , 描画可能要素 , 図形要素
内容モデル:
以下の要素を任意の順序・数で含めることができます:clipPath marker mask script style
属性:
aria属性 — ‘aria-activedescendant ,
‘aria-atomic ,
‘aria-autocomplete ,
‘aria-busy ,
‘aria-checked ,
‘aria-colcount ,
‘aria-colindex ,
‘aria-colspan ,
‘aria-controls ,
‘aria-current ,
‘aria-describedby ,
‘aria-details ,
‘aria-disabled ,
‘aria-dropeffect ,
‘aria-errormessage ,
‘aria-expanded ,
‘aria-flowto ,
‘aria-grabbed ,
‘aria-haspopup ,
‘aria-hidden ,
‘aria-invalid ,
‘aria-keyshortcuts ,
‘aria-label ,
‘aria-labelledby ,
‘aria-level ,
‘aria-live ,
‘aria-modal ,
‘aria-multiline ,
‘aria-multiselectable ,
‘aria-orientation ,
‘aria-owns ,
‘aria-placeholder ,
‘aria-posinset ,
‘aria-pressed ,
‘aria-readonly ,
‘aria-relevant ,
‘aria-required ,
‘aria-roledescription ,
‘aria-rowcount ,
‘aria-rowindex ,
‘aria-rowspan ,
‘aria-selected ,
‘aria-setsize ,
‘aria-sort ,
‘aria-valuemax ,
‘aria-valuemin ,
‘aria-valuenow ,
‘aria-valuetext ,
‘role 条件付き処理属性 —
‘requiredExtensions ,
‘systemLanguage
コア属性 — ‘id , ‘tabindex ,
‘lang ,
‘xml:space , ‘class ,
‘style グローバルイベント属性 — ‘oncancel , ‘oncanplay , ‘oncanplaythrough ,
‘onchange , ‘onclick , ‘onclose , ‘oncuechange , ‘ondblclick , ‘ondrag , ‘ondragend , ‘ondragenter , ‘ondragexit , ‘ondragleave , ‘ondragover , ‘ondragstart , ‘ondrop , ‘ondurationchange ,
‘onemptied , ‘onended , ‘onerror , ‘onfocus , ‘oninput , ‘oninvalid , ‘onkeydown , ‘onkeypress , ‘onkeyup , ‘onload , ‘onloadeddata , ‘onloadedmetadata ,
‘onloadstart , ‘onmousedown , ‘onmouseenter , ‘onmouseleave , ‘onmousemove , ‘onmouseout , ‘onmouseover , ‘onmouseup , ‘onmousewheel , ‘onpause , ‘onplay , ‘onplaying , ‘onprogress , ‘onratechange , ‘onreset , ‘onresize , ‘onscroll , ‘onseeked , ‘onseeking , ‘onselect , ‘onshow , ‘onstalled , ‘onsubmit , ‘onsuspend , ‘ontimeupdate , ‘ontoggle , ‘onvolumechange , ‘onwaiting 文書要素イベント属性 — ‘oncopy , ‘oncut , ‘onpaste グラフィックイベント属性 —
‘onfocusin , ‘onfocusout プレゼンテーション属性 —
‘pathLength
幾何プロパティ:
DOMインターフェース:
x および y 座標は、現在のユーザー座標系で矩形の左端と上端を指します。
width および height プロパティは矩形の全体の幅と高さを定義します。
これらのプロパティに負の値を指定するのは不正であり、構文エラーとして無視されます 。
いずれかの寸法の計算値がゼロの場合、その要素は描画されません。
角が丸い矩形の場合、
rx および ry の計算値は、
矩形の角を丸めるために使われる楕円弧の x軸・y軸の半径を定義します。
弧は常に水平・垂直軸で対称です。不均一な角丸矩形を作りたい場合は ‘path で明示的に定義してください。
これらのプロパティに負の値を指定するのは不正であり、構文エラーとして無視されます 。
いずれかの寸法の計算値がゼロ、もしくは auto が両方 の寸法で指定された場合、
角丸のない矩形となります。
角丸の x軸・y軸半径の使用値は他の寸法（auto値）から暗黙的に決まる場合があり、
また矩形の直線部分の長さが負にならないようにクランプも行われます。
rx および ry の使用値は、以下の手順で計算します：
両方の rx および ry の計算値が auto の場合
（autoは両プロパティの初期値なので、著者が指定しないか不正な値の場合もこの状態）、
両方の使用値は 0 となります（角は四角になります）。
それ以外の場合、指定値を次のように絶対値に変換します:
rx が長さまたはパーセンテージで指定され、ry が auto の場合、
rx のパーセンテージは矩形の width で解決し絶対値にし、
ry の絶対値もそれと同じ値にする。
ry が長さまたはパーセンテージで指定され、rx が auto の場合、
ry のパーセンテージは矩形の height で解決し絶対値にし、
rx の絶対値もそれと同じ値にする。
両方の rx および ry が長さまたはパーセンテージで指定された場合、
それぞれ個別に絶対値を計算する。
rx のパーセンテージは width で、
ry のパーセンテージは height で解決。
最後にクランプ処理を行い使用値を決定する:
絶対値の rx が矩形の width の半分より大きい場合、
使用値は width の半分。
絶対値の ry が矩形の height の半分より大きい場合、
使用値は height の半分。
それ以外は、先に計算した絶対値を使用値とする。
数学的には、‘rect 要素は、
下記のように同等な ‘path
要素にマッピングされます。
上記および Units で規定されたルールに従って、各幾何プロパティの絶対使用値
x , y , width , height , rx , ry
をユーザー座標系のユーザー単位で生成した後に行います：
絶対 moveto 操作で位置 (x+rx ,y ) へ移動
絶対水平 lineto 操作でパラメータ x+width-rx
両方 rx および ry が 0 より大きい場合、
絶対 楕円弧 操作で座標 (x+width ,y+ry )
へ移動。
rx および ry を楕円弧コマンドのパラメータとして使用し、
x-axis-rotation および large-arc-flag を 0、
sweep-flag を 1 に設定。
絶対垂直 lineto 操作でパラメータ y+height-ry
両方 rx および ry が 0 より大きい場合、
絶対 楕円弧 操作で座標
(x+width-rx ,y+height ) へ移動（前と同じパラメータ）絶対水平 lineto 操作でパラメータ x+rx
両方 rx および ry が 0 より大きい場合、
絶対 楕円弧 操作で座標 (x ,y+height-ry )
へ移動（前と同じパラメータ）絶対垂直 lineto 操作でパラメータ y+ry
両方 rx および ry が 0 より大きい場合、
前と同じパラメータで セグメント完了 close path 操作付きの絶対 楕円弧 操作を行う。
パス分解は
2013年6月3日 のテレカンで決定。
例 rect01 は角が鋭い矩形を示しています。‘rect 要素は黄色で塗り、ネイビーで線を描画しています。
<?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>Example rect01 - rectangle with sharp corners</desc>
<!-- 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>
SVGでこの例を見る
（SVG対応ブラウザのみ）
例 rect02 は2つの角丸矩形を示しています。rx は角丸の度合いを指定します。ry
属性に値を指定しなかったため、使用値は rx 属性から導出されます。
<?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>Example rect02 - rounded rectangles</desc>
<!-- 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>
SVGでこの例を見る
（SVG対応ブラウザのみ）
10.3. ‘circle’ 要素
‘circle
要素は、中心点と半径に基づいて円を定義します。
‘circle ’
カテゴリ:
グラフィックス要素 、描画可能要素 、図形要素
内容モデル:
以下の要素を任意の順序・個数で含むことができます:clipPath marker mask script style
属性:
aria属性 — ‘aria-activedescendant ,
‘aria-atomic ,
‘aria-autocomplete ,
‘aria-busy ,
‘aria-checked ,
‘aria-colcount ,
‘aria-colindex ,
‘aria-colspan ,
‘aria-controls ,
‘aria-current ,
‘aria-describedby ,
‘aria-details ,
‘aria-disabled ,
‘aria-dropeffect ,
‘aria-errormessage ,
‘aria-expanded ,
‘aria-flowto ,
‘aria-grabbed ,
‘aria-haspopup ,
‘aria-hidden ,
‘aria-invalid ,
‘aria-keyshortcuts ,
‘aria-label ,
‘aria-labelledby ,
‘aria-level ,
‘aria-live ,
‘aria-modal ,
‘aria-multiline ,
‘aria-multiselectable ,
‘aria-orientation ,
‘aria-owns ,
‘aria-placeholder ,
‘aria-posinset ,
‘aria-pressed ,
‘aria-readonly ,
‘aria-relevant ,
‘aria-required ,
‘aria-roledescription ,
‘aria-rowcount ,
‘aria-rowindex ,
‘aria-rowspan ,
‘aria-selected ,
‘aria-setsize ,
‘aria-sort ,
‘aria-valuemax ,
‘aria-valuemin ,
‘aria-valuenow ,
‘aria-valuetext ,
‘role 条件付き処理属性 —
‘requiredExtensions ,
‘systemLanguage
コア属性 — ‘id , ‘tabindex ,
‘lang ,
‘xml:space , ‘class ,
‘style グローバルイベント属性 — ‘oncancel , ‘oncanplay , ‘oncanplaythrough ,
‘onchange , ‘onclick , ‘onclose , ‘oncuechange , ‘ondblclick , ‘ondrag , ‘ondragend , ‘ondragenter , ‘ondragexit , ‘ondragleave , ‘ondragover , ‘ondragstart , ‘ondrop , ‘ondurationchange ,
‘onemptied , ‘onended , ‘onerror , ‘onfocus , ‘oninput , ‘oninvalid , ‘onkeydown , ‘onkeypress , ‘onkeyup , ‘onload , ‘onloadeddata , ‘onloadedmetadata ,
‘onloadstart , ‘onmousedown , ‘onmouseenter , ‘onmouseleave , ‘onmousemove , ‘onmouseout , ‘onmouseover , ‘onmouseup , ‘onmousewheel , ‘onpause , ‘onplay , ‘onplaying , ‘onprogress , ‘onratechange , ‘onreset , ‘onresize , ‘onscroll , ‘onseeked , ‘onseeking , ‘onselect , ‘onshow , ‘onstalled , ‘onsubmit , ‘onsuspend , ‘ontimeupdate , ‘ontoggle , ‘onvolumechange , ‘onwaiting ドキュメント要素イベント属性 — ‘oncopy , ‘oncut , ‘onpaste グラフィカルイベント属性 — ‘onfocusin , ‘onfocusout プレゼンテーション属性 —
‘pathLength
幾何プロパティ:
DOMインターフェース:
cx 属性と cy 属性は、円の中心座標を定義します。
r 属性は円の半径を定義します。
いずれかのプロパティに負の値を指定することは不正であり、構文解析エラーとして無視されなければなりません 。
数学的には、‘circle 要素は、4つの
楕円弧 セグメントからなる等価な ‘path
要素にマップされます。それぞれが円の1/4を覆います。パスは半径の「3時」の位置から開始し、（変形前の状態で）時計回りに進みます。
弧コマンドの rx および ry パラメータは、r
プロパティの使用値（ローカルユーザー単位に変換後）と同じ値となります。
x-axis-rotation 、
large-arc-flag 、
sweep-flag はすべてゼロに設定されます。
座標は以下のように計算されます。
cx , cy , r は、各プロパティの使用値（ユーザー単位に変換済み）です:
点 cx+r ,cy への move-to コマンド;
cx ,cy+r への弧;cx-r ,cy への弧;cx ,cy-r への弧;セグメント完了 close path 操作による弧。
パス分解は
2013年6月3日 の電話会議で解決されました。
例 circle01 は、赤で塗りつぶされ、青でストロークされた ‘circle 要素で構成されています。
<?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 - 赤で塗りつぶし青でストロークされた円</desc>
<!-- 'rect' 要素でビューポートのアウトラインを表示 -->
<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>
この例をSVGとして表示（SVG対応ブラウザのみ）
10.4. 『ellipse』 要素
『ellipse
要素は、中心点と2つの半径に基づいて、現行標準のユーザー座標系 に軸合わせされた楕円を定義します。
『ellipse 』
カテゴリ:
グラフィックス要素 、描画可能要素 、図形要素
内容モデル:
以下の要素を任意の順序・個数で含むことができます:clipPath marker mask script style
属性:
aria属性 — 『aria-activedescendant ,
『aria-atomic ,
『aria-autocomplete ,
『aria-busy ,
『aria-checked ,
『aria-colcount ,
『aria-colindex ,
『aria-colspan ,
『aria-controls ,
『aria-current ,
『aria-describedby ,
『aria-details ,
『aria-disabled ,
『aria-dropeffect ,
『aria-errormessage ,
『aria-expanded ,
『aria-flowto ,
『aria-grabbed ,
『aria-haspopup ,
『aria-hidden ,
『aria-invalid ,
『aria-keyshortcuts ,
『aria-label ,
『aria-labelledby ,
『aria-level ,
『aria-live ,
『aria-modal ,
『aria-multiline ,
『aria-multiselectable ,
『aria-orientation ,
『aria-owns ,
『aria-placeholder ,
『aria-posinset ,
『aria-pressed ,
『aria-readonly ,
『aria-relevant ,
『aria-required ,
『aria-roledescription ,
『aria-rowcount ,
『aria-rowindex ,
『aria-rowspan ,
『aria-selected ,
『aria-setsize ,
『aria-sort ,
『aria-valuemax ,
『aria-valuemin ,
『aria-valuenow ,
『aria-valuetext ,
『role 条件付き処理属性 —
『requiredExtensions ,
『systemLanguage
コア属性 — 『id , 『tabindex ,
『lang ,
『xml:space , 『class ,
『style グローバルイベント属性 — 『oncancel , 『oncanplay , 『oncanplaythrough ,
『onchange , 『onclick , 『onclose , 『oncuechange , 『ondblclick , 『ondrag , 『ondragend , 『ondragenter , 『ondragexit , 『ondragleave , 『ondragover , 『ondragstart , 『ondrop , 『ondurationchange ,
『onemptied , 『onended , 『onerror , 『onfocus , 『oninput , 『oninvalid , 『onkeydown , 『onkeypress , 『onkeyup , 『onload , 『onloadeddata , 『onloadedmetadata ,
『onloadstart , 『onmousedown , 『onmouseenter , 『onmouseleave , 『onmousemove , 『onmouseout , 『onmouseover , 『onmouseup , 『onmousewheel , 『onpause , 『onplay , 『onplaying , 『onprogress , 『onratechange , 『onreset , 『onresize , 『onscroll , 『onseeked , 『onseeking , 『onselect , 『onshow , 『onstalled , 『onsubmit , 『onsuspend , 『ontimeupdate , 『ontoggle , 『onvolumechange , 『onwaiting ドキュメント要素イベント属性 — 『oncopy , 『oncut , 『onpaste グラフィカルイベント属性 — 『onfocusin , 『onfocusout プレゼンテーション属性 —
『pathLength
幾何プロパティ:
DOMインターフェース:
cx および cy は楕円の中心座標を定義します。
rx および ry は楕円のx軸半径とy軸半径を定義します。
どちらかのプロパティに負の値を指定することは不正であり、構文解析エラーとして無視されなければなりません 。
いずれかの次元の算出値がゼロ、または両方 の次元がautoの場合は、要素の描画が無効となります。
いずれか の rx または ry に auto が指定された場合は、上記の矩形のルールに従って使用値に変換されます（ただしwidth やheight によるクランプはありません）。
実質的に、auto値は、半径が一方の次元だけで定義される円形を作成します。
これにより、以下のいずれかの条件による半径で円を作成できます:
座標系の幅 に対するパーセンテージ：rx にパーセンテージ値、ry にauto値。
座標系の高さ に対するパーセンテージ：rx にauto値、ry にパーセンテージ値。
SVG 2で追加。
rx およびry のauto値は、楕円と矩形の両方で一貫した構文解析を可能にするために追加されました。
以前は、rx またはry が未指定の場合、楕円は描画されませんでした。
数学的には、『ellipse 要素は4つの
楕円弧 セグメントからなる等価な『path 要素にマップされます。それぞれが楕円の1/4を覆います。パスは半径の「3時」の位置から開始し、（変形前の状態で）時計回りに進みます。
弧コマンドの rx および ry パラメータは、各プロパティの使用値（ローカルユーザー単位への変換後）です。
x-axis-rotation 、
large-arc-flag 、
sweep-flag はすべてゼロに設定されます。
座標は以下のように計算されます。
cx , cy , rx , ry は、各プロパティの使用値（ユーザー単位に変換済み）です:
点 cx+rx ,cy への move-to コマンド;
cx ,cy+ry への弧;cx-rx ,cy への弧;cx ,cy-ry への弧;セグメント完了 close path 操作による弧。
パス分解は
2013年6月3日 の電話会議で解決されました。
例 ellipse01 は、『svg 要素の『viewBox 属性と、『g 要素および『ellipse 要素のtransform プロパティによって確立されたユーザー座標系で2つの楕円の座標を指定しています。両方の楕円は、cx およびcy 属性（楕円の中心）のデフォルト値ゼロを使用しています。2つ目の楕円は回転されています。
<?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 - 楕円の例</desc>
<!-- 'rect' 要素でビューポートのアウトラインを表示 -->
<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>
SVGとして表示（SVG対応ブラウザのみ）
10.5. ‘line’ 要素
‘line
要素は、ある点から始まり、別の点で終わる線分を定義します。
‘line ’
カテゴリ:
グラフィック要素 , 描画可能要素 , 図形要素
内容モデル:
以下の要素を任意の順序・数で含めることができます:clipPath marker mask script style
属性:
aria属性 — ‘aria-activedescendant ,
‘aria-atomic ,
‘aria-autocomplete ,
‘aria-busy ,
‘aria-checked ,
‘aria-colcount ,
‘aria-colindex ,
‘aria-colspan ,
‘aria-controls ,
‘aria-current ,
‘aria-describedby ,
‘aria-details ,
‘aria-disabled ,
‘aria-dropeffect ,
‘aria-errormessage ,
‘aria-expanded ,
‘aria-flowto ,
‘aria-grabbed ,
‘aria-haspopup ,
‘aria-hidden ,
‘aria-invalid ,
‘aria-keyshortcuts ,
‘aria-label ,
‘aria-labelledby ,
‘aria-level ,
‘aria-live ,
‘aria-modal ,
‘aria-multiline ,
‘aria-multiselectable ,
‘aria-orientation ,
‘aria-owns ,
‘aria-placeholder ,
‘aria-posinset ,
‘aria-pressed ,
‘aria-readonly ,
‘aria-relevant ,
‘aria-required ,
‘aria-roledescription ,
‘aria-rowcount ,
‘aria-rowindex ,
‘aria-rowspan ,
‘aria-selected ,
‘aria-setsize ,
‘aria-sort ,
‘aria-valuemax ,
‘aria-valuemin ,
‘aria-valuenow ,
‘aria-valuetext ,
‘role 条件付き処理属性 —
‘requiredExtensions ,
‘systemLanguage
コア属性 — ‘id , ‘tabindex ,
‘lang ,
‘xml:space , ‘class ,
‘style グローバルイベント属性 — ‘oncancel , ‘oncanplay , ‘oncanplaythrough ,
‘onchange , ‘onclick , ‘onclose , ‘oncuechange , ‘ondblclick , ‘ondrag , ‘ondragend , ‘ondragenter , ‘ondragexit , ‘ondragleave , ‘ondragover , ‘ondragstart , ‘ondrop , ‘ondurationchange ,
‘onemptied , ‘onended , ‘onerror , ‘onfocus , ‘oninput , ‘oninvalid , ‘onkeydown , ‘onkeypress , ‘onkeyup , ‘onload , ‘onloadeddata , ‘onloadedmetadata ,
‘onloadstart , ‘onmousedown , ‘onmouseenter , ‘onmouseleave , ‘onmousemove , ‘onmouseout , ‘onmouseover , ‘onmouseup , ‘onmousewheel , ‘onpause , ‘onplay , ‘onplaying , ‘onprogress , ‘onratechange , ‘onreset , ‘onresize , ‘onscroll , ‘onseeked , ‘onseeking , ‘onselect , ‘onshow , ‘onstalled , ‘onsubmit , ‘onsuspend , ‘ontimeupdate , ‘ontoggle , ‘onvolumechange , ‘onwaiting 文書要素イベント属性 — ‘oncopy , ‘oncut , ‘onpaste グラフィックイベント属性 —
‘onfocusin , ‘onfocusout プレゼンテーション属性 —
‘pathLength ‘x1 ‘y1 ‘x2 ‘y2
DOMインターフェース:
属性定義:
線の始点のx軸・y軸座標。
線の終点のx軸・y軸座標。
将来の仕様で ‘x1 , ‘y1 , ‘x2 , ‘y2
属性が幾何プロパティに変換される可能性があります。
現時点では、これらは要素属性としてのみ指定でき、CSS経由では指定できません。
数学的には、‘line 要素は
下記のように同等な ‘path
要素にマッピングできます。
Units に従い座標をユーザー座標系ユーザー単位に変換して x1 , y1 , x2 ,
y2 の値を生成した後：
‘line
要素は単一の線分であり、幾何学的に一次元のため、内部領域を持ちません。そのため、‘line 要素は決して塗りつぶされません（fill プロパティ参照）。
例 line01 は、
‘viewBox 属性によって ‘svg
要素上に設定されたユーザー座標系で、5本の線の座標を指定しています。線の太さはそれぞれ異なります。
<?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>Example line01 - lines expressed in user coordinates</desc>
<!-- 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>
SVGでこの例を見る（SVG対応ブラウザのみ）
10.6. ‘polyline’ 要素
‘polyline
要素は、複数の直線セグメントが連結された集合を定義します。通常、‘polyline 要素は開いた図形を定義します。
‘polyline ’
カテゴリ:
グラフィック要素 , 描画可能要素 , 図形要素
内容モデル:
以下の要素を任意の順序・数で含めることができます:clipPath marker mask script style
属性:
aria属性 — ‘aria-activedescendant ,
‘aria-atomic ,
‘aria-autocomplete ,
‘aria-busy ,
‘aria-checked ,
‘aria-colcount ,
‘aria-colindex ,
‘aria-colspan ,
‘aria-controls ,
‘aria-current ,
‘aria-describedby ,
‘aria-details ,
‘aria-disabled ,
‘aria-dropeffect ,
‘aria-errormessage ,
‘aria-expanded ,
‘aria-flowto ,
‘aria-grabbed ,
‘aria-haspopup ,
‘aria-hidden ,
‘aria-invalid ,
‘aria-keyshortcuts ,
‘aria-label ,
‘aria-labelledby ,
‘aria-level ,
‘aria-live ,
‘aria-modal ,
‘aria-multiline ,
‘aria-multiselectable ,
‘aria-orientation ,
‘aria-owns ,
‘aria-placeholder ,
‘aria-posinset ,
‘aria-pressed ,
‘aria-readonly ,
‘aria-relevant ,
‘aria-required ,
‘aria-roledescription ,
‘aria-rowcount ,
‘aria-rowindex ,
‘aria-rowspan ,
‘aria-selected ,
‘aria-setsize ,
‘aria-sort ,
‘aria-valuemax ,
‘aria-valuemin ,
‘aria-valuenow ,
‘aria-valuetext ,
‘role 条件付き処理属性 —
‘requiredExtensions ,
‘systemLanguage
コア属性 — ‘id , ‘tabindex ,
‘lang ,
‘xml:space , ‘class ,
‘style グローバルイベント属性 — ‘oncancel , ‘oncanplay , ‘oncanplaythrough ,
‘onchange , ‘onclick , ‘onclose , ‘oncuechange , ‘ondblclick , ‘ondrag , ‘ondragend , ‘ondragenter , ‘ondragexit , ‘ondragleave , ‘ondragover , ‘ondragstart , ‘ondrop , ‘ondurationchange ,
‘onemptied , ‘onended , ‘onerror , ‘onfocus , ‘oninput , ‘oninvalid , ‘onkeydown , ‘onkeypress , ‘onkeyup , ‘onload , ‘onloadeddata , ‘onloadedmetadata ,
‘onloadstart , ‘onmousedown , ‘onmouseenter , ‘onmouseleave , ‘onmousemove , ‘onmouseout , ‘onmouseover , ‘onmouseup , ‘onmousewheel , ‘onpause , ‘onplay , ‘onplaying , ‘onprogress , ‘onratechange , ‘onreset , ‘onresize , ‘onscroll , ‘onseeked , ‘onseeking , ‘onselect , ‘onshow , ‘onstalled , ‘onsubmit , ‘onsuspend , ‘ontimeupdate , ‘ontoggle , ‘onvolumechange , ‘onwaiting 文書要素イベント属性 — ‘oncopy , ‘oncut , ‘onpaste グラフィックイベント属性 —
‘onfocusin , ‘onfocusout プレゼンテーション属性 —
‘pathLength ‘points
DOMインターフェース:
属性定義:
名前
値
初期値
アニメーション可能
points <points> (なし)
yes
意味:
ポリラインを構成する各ポイント。すべての座標値はユーザー座標系で指定されます。
座標数が奇数の場合、要素はエラーとなり、誤指定された ‘path
要素と同じユーザーエージェント挙動になります。エラー時、ユーザーエージェントは最後の奇数座標を無視し、それ以外は図形を描画します。
初期値 (なし) は、polyline要素が有効だが描画されないことを示します。
将来の仕様で ‘points
属性が幾何プロパティに変換される可能性があります。
現時点では、これらは要素属性としてのみ指定でき、CSS経由では指定できません。
数学的には、‘polyline 要素は
下記のように同等な ‘path
要素にマッピングできます:
例 polyline01
下記は、‘viewBox 属性によって
‘svg
要素上に設定されたユーザー座標系で、ポリラインを指定しています。
<?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>Example polyline01 - increasingly larger bars</desc>
<!-- 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>
SVGでこの例を見る（SVG対応ブラウザのみ）
10.7. ‘polygon’ 要素
‘polygon
要素は、複数の直線セグメントが連結された閉じた図形を定義します。
‘polygon ’
カテゴリ:
グラフィック要素 , 描画可能要素 , 図形要素
内容モデル:
以下の要素を任意の順序・数で含めることができます:clipPath marker mask script style
属性:
aria属性 — ‘aria-activedescendant ,
‘aria-atomic ,
‘aria-autocomplete ,
‘aria-busy ,
‘aria-checked ,
‘aria-colcount ,
‘aria-colindex ,
‘aria-colspan ,
‘aria-controls ,
‘aria-current ,
‘aria-describedby ,
‘aria-details ,
‘aria-disabled ,
‘aria-dropeffect ,
‘aria-errormessage ,
‘aria-expanded ,
‘aria-flowto ,
‘aria-grabbed ,
‘aria-haspopup ,
‘aria-hidden ,
‘aria-invalid ,
‘aria-keyshortcuts ,
‘aria-label ,
‘aria-labelledby ,
‘aria-level ,
‘aria-live ,
‘aria-modal ,
‘aria-multiline ,
‘aria-multiselectable ,
‘aria-orientation ,
‘aria-owns ,
‘aria-placeholder ,
‘aria-posinset ,
‘aria-pressed ,
‘aria-readonly ,
‘aria-relevant ,
‘aria-required ,
‘aria-roledescription ,
‘aria-rowcount ,
‘aria-rowindex ,
‘aria-rowspan ,
‘aria-selected ,
‘aria-setsize ,
‘aria-sort ,
‘aria-valuemax ,
‘aria-valuemin ,
‘aria-valuenow ,
‘aria-valuetext ,
‘role 条件付き処理属性 —
‘requiredExtensions ,
‘systemLanguage
コア属性 — ‘id , ‘tabindex ,
‘lang ,
‘xml:space , ‘class ,
‘style グローバルイベント属性 — ‘oncancel , ‘oncanplay , ‘oncanplaythrough ,
‘onchange , ‘onclick , ‘onclose , ‘oncuechange , ‘ondblclick , ‘ondrag , ‘ondragend , ‘ondragenter , ‘ondragexit , ‘ondragleave , ‘ondragover , ‘ondragstart , ‘ondrop , ‘ondurationchange ,
‘onemptied , ‘onended , ‘onerror , ‘onfocus , ‘oninput , ‘oninvalid , ‘onkeydown , ‘onkeypress , ‘onkeyup , ‘onload , ‘onloadeddata , ‘onloadedmetadata ,
‘onloadstart , ‘onmousedown , ‘onmouseenter , ‘onmouseleave , ‘onmousemove , ‘onmouseout , ‘onmouseover , ‘onmouseup , ‘onmousewheel , ‘onpause , ‘onplay , ‘onplaying , ‘onprogress , ‘onratechange , ‘onreset , ‘onresize , ‘onscroll , ‘onseeked , ‘onseeking , ‘onselect , ‘onshow , ‘onstalled , ‘onsubmit , ‘onsuspend , ‘ontimeupdate , ‘ontoggle , ‘onvolumechange , ‘onwaiting 文書要素イベント属性 — ‘oncopy , ‘oncut , ‘onpaste グラフィックイベント属性 —
‘onfocusin , ‘onfocusout プレゼンテーション属性 —
‘pathLength ‘points
DOMインターフェース:
属性定義:
名前
値
初期値
アニメーション可能
points <points> (なし)
yes
polygonを構成する各ポイント。すべての座標値はユーザー座標系で指定されます。
座標数が奇数の場合、要素はエラーとなり、誤指定された ‘path 要素と同じユーザーエージェント挙動になります。
初期値 (なし) は、polygon要素が有効だが描画されないことを示します。
将来の仕様で ‘points
属性が幾何プロパティに変換される可能性があります。
現時点では、これらは要素属性としてのみ指定でき、CSS経由では指定できません。
数学的には、‘polygon 要素は
下記のように同等な ‘path
要素にマッピングできます:
例
polygon01 下記は、‘viewBox 属性によって ‘svg
要素上に設定されたユーザー座標系で星形と六角形の2つのpolygonを指定しています。
<?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>Example polygon01 - star and hexagon</desc>
<!-- 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>
SVGでこの例を見る（SVG対応ブラウザのみ）
10.8. DOMインターフェース
10.8.1. インターフェース SVGRectElement
SVGRectElement オブジェクトは、DOM内の ‘rect 要素を表します。
[Exposed=Window]
interface SVGRectElement : SVGGeometryElement {
[SameObject] readonly attribute SVGAnimatedLength x ;
[SameObject] readonly attribute SVGAnimatedLength y ;
[SameObject] readonly attribute SVGAnimatedLength width ;
[SameObject] readonly attribute SVGAnimatedLength height ;
[SameObject] readonly attribute SVGAnimatedLength rx ;
[SameObject] readonly attribute SVGAnimatedLength ry ;
};
x ,
y ,
width ,
height ,
rx および
ry のIDL属性は、
反映 されます。各IDL属性はそれぞれ x , y ,
width , height , rx および
ry の計算値と、それに対応するプレゼンテーション属性を反映します。
10.8.2. インターフェース SVGCircleElement
SVGCircleElement オブジェクトは、DOM内の ‘circle 要素を表します。
[Exposed=Window]
interface SVGCircleElement : SVGGeometryElement {
[SameObject] readonly attribute SVGAnimatedLength cx ;
[SameObject] readonly attribute SVGAnimatedLength cy ;
[SameObject] readonly attribute SVGAnimatedLength r ;
};
cx ,
cy および
r のIDL属性は、
反映 されます。各IDL属性はそれぞれ cx , cy
および y の計算値と、それに対応するプレゼンテーション属性を反映します。
10.8.3. インターフェース SVGEllipseElement
SVGEllipseElement オブジェクトは、DOM内の
‘ellipse 要素を表します。
[Exposed=Window]
interface SVGEllipseElement : SVGGeometryElement {
[SameObject] readonly attribute SVGAnimatedLength cx ;
[SameObject] readonly attribute SVGAnimatedLength cy ;
[SameObject] readonly attribute SVGAnimatedLength rx ;
[SameObject] readonly attribute SVGAnimatedLength ry ;
};
cx ,
cy ,
rx および
ry
のIDL属性は、反映 されます。それぞれ cx , cy , rx , ry の計算値と、それに対応するプレゼンテーション属性を反映します。
10.8.4. インターフェース SVGLineElement
SVGLineElement インターフェースは ‘line 要素に対応します。
[Exposed=Window]
interface SVGLineElement : SVGGeometryElement {
[SameObject] readonly attribute SVGAnimatedLength x1 ;
[SameObject] readonly attribute SVGAnimatedLength y1 ;
[SameObject] readonly attribute SVGAnimatedLength x2 ;
[SameObject] readonly attribute SVGAnimatedLength y2 ;
};
x1 ,
y1 ,
x2 および
y2 のIDL属性は、反映 されます。それぞれ ‘x1 , ‘y1 , ‘x2 , ‘y2
のコンテンツ属性を反映します。
10.8.5. ミックスイン SVGAnimatedPoints
SVGAnimatedPoints インターフェースは、反映 された ‘points 属性を ‘polygon または ‘polyline
要素上で扱うために使用されます。このインターフェースは SVGPolygonElement および SVGPolylineElement インターフェースにミックスインされます。
注：SVG 1.1 SEでは animatedPoints
属性はアニメーションされた値を表していましたが、本SVGバージョンでは points のエイリアスとなります。
interface mixin SVGAnimatedPoints {
[SameObject] readonly attribute SVGPointList points ;
[SameObject] readonly attribute SVGPointList animatedPoints ;
};
points および
animatedPoints のIDL属性は、反映された属性の現在の非アニメーション値を表します。
points または animatedPoints を取得すると、
属性の基底値を反映する SVGPointList オブジェクトが返されます。
10.8.6. インターフェース SVGPointList
SVGPointList インターフェースは リストインターフェース であり、要素は DOMPoint オブジェクトです。SVGPointList オブジェクトはポイントのリストを表します。
[Exposed=Window]
interface SVGPointList {
readonly attribute unsigned long length ;
readonly attribute unsigned long numberOfItems ;
void clear ();
DOMPoint initialize (DOMPoint newItem);
getter DOMPoint getItem (unsigned long index);
DOMPoint insertItemBefore (DOMPoint newItem, unsigned long index);
DOMPoint replaceItem (DOMPoint newItem, unsigned long index);
DOMPoint removeItem (unsigned long index);
DOMPoint appendItem (DOMPoint newItem);
setter void (unsigned long index, DOMPoint newItem);
};
SVGPointList のすべてのインターフェースメンバーの挙動は リストインターフェース で定義されています。
この仕様は DOMPoint
オブジェクトの挙動に、‘points 属性を反映できるように、Geometry Interfaces 仕様より追加要件を課しています。
DOMPoint
オブジェクトは特定の要素に「関連付け」られることがあります。関連付けられた要素は、そのオブジェクトが 反映 属性の場合、どの要素のコンテンツ属性を更新するかを決定します。特に記述がない限り、DOMPoint オブジェクトはどの要素にも関連付けられていません。
DOMPoint
オブジェクトは 読み取り専用 に設定される場合があり、その場合はオブジェクトの変更を試みると例外がスローされます。読み取り専用 DOMPoint の x 、y 、w 、z
IDL属性に代入しようとすると、内部座標値の更新の代わりに NoModificationAllowedError をスロー しなければなりません。
この挙動は読み書き可能な DOMPoint インターフェースのみに適用されます。DOMPointReadOnly
インターフェース（‘points
属性の反映には使用しません）は、修正を試みると既に例外をスローします。
書き込み可能な DOMPoint の x 、y 、w 、z
IDL属性に代入すると、内部座標値の更新後に次の手順を実行します：
DOMPoint が 反映属性の基底値の要素を反映している 場合は、属性の基底値を反映する SVGPointList を使って 再シリアライズ する。それ以外で DOMPoint が svg要素の現在の移動量を表す 場合、その要素が 最外svg要素 の場合は：
[a b c d e
f ]を文書の拡大・パン変換を表す2x3行列とする。
x とy を DOMPoint オブジェクトの x座標・y座標とする。文書の拡大・パン変換を [a 0 0 d x y ]に設定する。
10.8.7. インターフェース SVGPolylineElement
SVGPolylineElement オブジェクトは、DOM内の
‘polyline 要素を表します。
[Exposed=Window]
interface SVGPolylineElement : SVGGeometryElement {
};
SVGPolylineElement includes SVGAnimatedPoints ;
10.8.8. インターフェース SVGPolygonElement
SVGPolygonElement オブジェクトは、DOM内の
‘polygon 要素を表します。
[Exposed=Window]
interface SVGPolygonElement : SVGGeometryElement {
};
SVGPolygonElement includes SVGAnimatedPoints ;
