14 January 2003 翻訳更新： 2010/04/27

9 基本図形

9.1 概要

SVG には次に挙げる基本的な図形要素が用意されている：

SVG contains the following set of basic shape elements:

rectangle （矩形, 角の丸められたものも含む）
circle （円形）
ellipse （楕円形）
line （直線）
polyline （折線）
polygon （多角形）

rectangles (rectangle, including optional rounded corners)
circles
ellipses
lines
polylines
polygons

数学的には、これらの図形要素は同じ図形を構成する 'path' 要素と同値である。基本図形に対しストロークやフィルを適用したり、基本図形をクリッピングパスとして利用することができる。 'path' 要素で利用できる全てのプロパティは基本図形にも適用される。

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.

9.2 'rect' 要素

'rect' 要素は現在の利用座標系における座標軸に平行な矩形を定義する。属性 rx と ry に適切な値を与えて矩形の角を丸めることもできる。

The 'rect' element defines a rectangle which is axis-aligned with the current user coordinate system . Rounded rectangles can be achieved by setting appropriate values for attributes rx and ry .

<!ENTITY % SVG.rect.extra.content "" >
<!ENTITY % SVG.rect.element "INCLUDE" >
<![%SVG.rect.element;[
<!ENTITY % SVG.rect.content
    "(( %SVG.Description.class; )*, ( %SVG.Animation.class;
        %SVG.rect.extra.content; )*)"
>
<!ELEMENT %SVG.rect.qname; %SVG.rect.content; >
<!-- end of SVG.rect.element -->]]>
<!ENTITY % SVG.rect.attlist "INCLUDE" >
<![%SVG.rect.attlist;[
<!ATTLIST %SVG.rect.qname;
    %SVG.Core.attrib;
    %SVG.Conditional.attrib;
    %SVG.Style.attrib;
    %SVG.Paint.attrib;
    %SVG.Color.attrib;
    %SVG.Opacity.attrib;
    %SVG.Graphics.attrib;
    %SVG.Clip.attrib;
    %SVG.Mask.attrib;
    %SVG.Filter.attrib;
    %SVG.GraphicalEvents.attrib;
    %SVG.Cursor.attrib;
    %SVG.External.attrib;
    x %Coordinate.datatype; #IMPLIED
    y %Coordinate.datatype; #IMPLIED
    width %Length.datatype; #REQUIRED
    height %Length.datatype; #REQUIRED
    rx %Length.datatype; #IMPLIED
    ry %Length.datatype; #IMPLIED
    transform %TransformList.datatype; #IMPLIED
>

属性定義：

Attribute definitions:

x = "<coordinate>": 現在の利用座標系における矩形の左右端のＸ座標のうちの小さい方。
この属性が指定されていない場合の効果は、値 "0" が指定されたときと同じになる。
アニメーション：可; The x-axis coordinate of the side of the rectangle which has the smaller x-axis coordinate value in the current user coordinate system.
If the attribute is not specified, the effect is as if a value of "0" were specified.
y = "<coordinate>": 現在の利用座標系における矩形の上下端のＹ座標のうちの小さい方。
この属性が指定されていない場合の効果は、値 "0" が指定されたときと同じになる。
アニメーション：可; The y-axis coordinate of the side of the rectangle which has the smaller y-axis coordinate value in the current user coordinate system.
If the attribute is not specified, the effect is as if a value of "0" were specified.
width = "<length>": 矩形の幅。
負値はエラー（エラー処理を見よ）。値を０にすると要素は描画されなくなる。
アニメーション：可; The width of the rectangle.
A negative value is an error (see Error processing ). A value of zero disables rendering of the element.
height = "<length>": 矩形の高さ。
負値はエラー（エラー処理を見よ）。値を０にすると要素は描画されなくなる。
アニメーション：可; The height of the rectangle.
A negative value is an error (see Error processing ). A value of zero disables rendering of the element.
rx = "<length>": 矩形の角を丸めるのに用いられる楕円のＸ軸半径の長さ。
負値はエラー（エラー処理を見よ）。
この属性が指定されていない場合にどうなるかは下で述べる。
アニメーション：可; For rounded rectangles, the x-axis radius of the ellipse used to round off the corners of the rectangle.
A negative value is an error (see Error processing ).
See the notes below about what happens if the attribute is not specified.
ry = "<length>": 矩形の角を丸めるのに用いられる楕円のＹ軸半径の長さ。
負値はエラー（エラー処理を見よ）。
この属性が指定されていない場合にどうなるかは下で述べる。
アニメーション：可; For rounded rectangles, the y-axis radius of the ellipse used to round off the corners of the rectangle.
A negative value is an error (see Error processing ).
See the notes below about what happens if the attribute is not specified.

rx に妥当な値が指定されており ry についてはそうでない場合、 ry の値が rx に等しいものとして処理される。 ry に妥当な値が指定されており rx についてはそうでない場合、 rx の値が ry に等しいものとして処理される。 rx と ry の両方に妥当な値が指定されていない場合、角の丸めに何も指定されてなかったものとして処理され、矩形の角は直角になる。 rx が矩形の幅の半分より大きい場合、 rx に矩形の幅の半分に等しい値が指定されたものとして処理される。 ry が矩形の高さの半分より大きい場合、 ry に矩形の高さの半分に等しい値が指定されたものとして処理される。

If a properly specified value is provided for rx but not for ry , then the user agent processes the 'rect' element with the effective value for ry as equal to rx . If a properly specified value is provided for ry but not for rx , then the user agent processes the 'rect' element with the effective value for rx as equal to ry . If neither rx nor ry has a properly specified value, then the user agent processes the 'rect' element as if no rounding had been specified, resulting in square corners. If rx is greater than half of the width of the rectangle, then the user agent processes the 'rect' element with the effective value for rx as half of the width of the rectangle. If ry is greater than half of the height of the rectangle, then the user agent processes the 'rect' element with the effective value for ry as half of the height of the rectangle.

数学的には 'rect' 要素は以下に述べる 'path' 要素と等価である（注意：以下に現れる数値 x, y, width, height, rx, ry は 'rect' 要素の同じ名前の属性値をあらかじめ単位に従って利用座標系における値に換算したものとする。また、rx, ry は「妥当な値」に修正済みとする）：

Mathematically, a 'rect' element can be mapped to an equivalent 'path' element as follows: (Note: all coordinate and length values are first converted into user space coordinates according to Units .)

座標 (x + rx, y) への絶対 moveto 操作を行う。
perform an absolute moveto operation to location (x+rx,y), where x is the value of the 'rect' element's x attribute converted to user space, rx is the effective value of the rx attribute converted to user space and y is the value of the y attribute converted to user space
座標 (x + width - rx, y) への絶対水平 lineto 操作を行う。
perform an absolute horizontal lineto operation to location (x+width-rx,y), where width is the 'rect' element's width attribute converted to user space
座標 (x + width, y + ry) への絶対楕円 arcto 操作を行う。ここで、楕円 arcto における x-axis-rotation は０, large-arc-flag は０, sweep-flag は１である。
perform an absolute elliptical arc operation to coordinate (x+width,y+ry), where the effective values for the rx and ry attributes on the 'rect' element converted to user space are used as the rx and ry attributes on the elliptical arc command, respectively, the x-axis-rotation is set to zero, the large-arc-flag is set to zero, and the sweep-flag is set to one
座標 (x + width, y + height - ry) への絶対垂直 lineto 操作を行う。
perform a absolute vertical lineto to location (x+width,y+height-ry), where height is the 'rect' element's height attribute converted to user space
座標 (x + width - rx, y + height) への絶対楕円 arcto 操作を行う。
perform an absolute elliptical arc operation to coordinate (x+width-rx,y+height)
座標 (x + rx, y + height) への絶対水平 lineto 操作を行う。
perform an absolute horizontal lineto to location (x+rx,y+height)
座標 (x, y + height - ry) への絶対楕円 arcto 操作を行う。
perform an absolute elliptical arc operation to coordinate (x, y+height-ry)
座標 (x, y + ry) への絶対 lineto 操作を行う。
perform an absolute absolute vertical lineto to location (x, y + ry)
座標 (x + rx, y) への絶対楕円 arcto 操作を行う。
perform an absolute elliptical arc operation to coordinate (x + rx, y)

Example rect01 に角が尖った矩形を示す。 'rect' 要素は内部を黄色に塗られ、外形線を濃紺に塗られる。

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"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example rect01 - 角が尖った矩形</desc>
  <!-- 'rect' 要素でキャンバスの境界を表示 -->
  <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

この例を SVG で見る（ SVG 対応ブラウザのみ）

Example rect02 に角が丸められた二つの矩形を示す。 rx は矩形の丸みを指定している。 ry 属性には何も指定されていないので rx 属性と同じ値が利用されることに注意。

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, it will be assigned the same value as the rx attribute.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example rect02 - 角が丸められた矩形</desc>
  <!-- 'rect' 要素でキャンバスの境界を表示 -->
  <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

この例を SVG で見る（ SVG 対応ブラウザのみ）

9.3 'circle' 要素

'circle' 要素は中心点と半径をもとに円を定義する。

The 'circle' element defines a circle based on a center point and a radius.

<!ENTITY % SVG.circle.extra.content "" >
<!ENTITY % SVG.circle.element "INCLUDE" >
<![%SVG.circle.element;[
<!ENTITY % SVG.circle.content
    "(( %SVG.Description.class; )*, ( %SVG.Animation.class;
        %SVG.circle.extra.content; )*)"
>
<!ELEMENT %SVG.circle.qname; %SVG.circle.content; >
<!-- end of SVG.circle.element -->]]>
<!ENTITY % SVG.circle.attlist "INCLUDE" >
<![%SVG.circle.attlist;[
<!ATTLIST %SVG.circle.qname;
    %SVG.Core.attrib;
    %SVG.Conditional.attrib;
    %SVG.Style.attrib;
    %SVG.Paint.attrib;
    %SVG.Color.attrib;
    %SVG.Opacity.attrib;
    %SVG.Graphics.attrib;
    %SVG.Clip.attrib;
    %SVG.Mask.attrib;
    %SVG.Filter.attrib;
    %SVG.GraphicalEvents.attrib;
    %SVG.Cursor.attrib;
    %SVG.External.attrib;
    cx %Coordinate.datatype; #IMPLIED
    cy %Coordinate.datatype; #IMPLIED
    r %Length.datatype; #REQUIRED
    transform %TransformList.datatype; #IMPLIED
>

属性定義：

Attribute definitions:

cx = "<coordinate>": 円の中心のＸ座標。
この属性が指定されていない場合の効果は、値 "0" が指定されたときと同じになる。
アニメーション：可; The x-axis coordinate of the center of the circle.
If the attribute is not specified, the effect is as if a value of "0" were specified.
cy = "<coordinate>": 円の中心のＹ座標。
この属性が指定されていない場合の効果は、値 "0" が指定されたときと同じになる。
アニメーション：可; The y-axis coordinate of the center of the circle.
If the attribute is not specified, the effect is as if a value of "0" were specified.
r = "<length>": 円の半径。
負値はエラー（エラー処理を見よ）。値を０にすると要素は描画されなくなる。
アニメーション：可; The radius of the circle.
A negative value is an error (see Error processing ). A value of zero disables rendering of the element.

'circle' 要素の弧は「３時」の地点から「９時」の地点へ向かって時計周りに進む。弧の始点と方向は利用空間の座標系変換により、要素の幾何と同じ様に影響を受ける。

The arc of a 'circle' element begins at the "3 o'clock" point on the radius and progresses towards the "9 o'clock" point. The starting point and direction of the arc are affected by the user space transform in the same manner as the geometry of the element.

Example circle01 に赤色のフィルと青色のストロークがなされる 'circle' 要素を示す。

Example circle01 consists of a 'circle' element that is filled with red and stroked with blue.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example 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>

Example circle01

この例を SVG で見る（ SVG 対応ブラウザのみ）

9.4 'ellipse' 要素

'ellipse' 要素は中心と二つの半径の長さを与えることにより利用座標系の座標軸に径が揃えられた楕円を定義する。

The 'ellipse' element defines an ellipse which is axis-aligned with the current user coordinate system based on a center point and two radii.

<!ENTITY % SVG.ellipse.extra.content "" >
<!ENTITY % SVG.ellipse.element "INCLUDE" >
<![%SVG.ellipse.element;[
<!ENTITY % SVG.ellipse.content
    "(( %SVG.Description.class; )*, ( %SVG.Animation.class;
        %SVG.ellipse.extra.content; )*)"
>
<!ELEMENT %SVG.ellipse.qname; %SVG.ellipse.content; >
<!-- end of SVG.ellipse.element -->]]>
<!ENTITY % SVG.ellipse.attlist "INCLUDE" >
<![%SVG.ellipse.attlist;[
<!ATTLIST %SVG.ellipse.qname;
    %SVG.Core.attrib;
    %SVG.Conditional.attrib;
    %SVG.Style.attrib;
    %SVG.Paint.attrib;
    %SVG.Color.attrib;
    %SVG.Opacity.attrib;
    %SVG.Graphics.attrib;
    %SVG.Clip.attrib;
    %SVG.Mask.attrib;
    %SVG.Filter.attrib;
    %SVG.GraphicalEvents.attrib;
    %SVG.Cursor.attrib;
    %SVG.External.attrib;
    cx %Coordinate.datatype; #IMPLIED
    cy %Coordinate.datatype; #IMPLIED
    rx %Length.datatype; #REQUIRED
    ry %Length.datatype; #REQUIRED
    transform %TransformList.datatype; #IMPLIED
>

属性定義：

Attribute definitions:

cx = "<coordinate>": 楕円の中心のＸ座標。
この属性が指定されていない場合の効果は、値 "0" が指定されたときと同じになる。
アニメーション：可; The x-axis coordinate of the center of the ellipse.
If the attribute is not specified, the effect is as if a value of "0" were specified.
cy = "<coordinate>": 楕円の中心のＹ座標。
この属性が指定されていない場合の効果は、値 "0" が指定されたときと同じになる。
アニメーション：可; The y-axis coordinate of the center of the ellipse.
If the attribute is not specified, the effect is as if a value of "0" were specified.
rx = "<length>": 楕円のＸ軸半径の長さ。
負値はエラー（エラー処理を見よ）。値を０にすると要素は描画されなくなる。
アニメーション：可; The x-axis radius of the ellipse.
A negative value is an error (see Error processing ). A value of zero disables rendering of the element.
ry = "<length>": 楕円のＹ軸半径の長さ。
負値はエラー（エラー処理を見よ）。値を０にすると要素は描画されなくなる。
アニメーション：可; The y-axis radius of the ellipse.
A negative value is an error (see Error processing ). A value of zero disables rendering of the element.

'ellipse' 要素の弧は「３時」の地点から「９時」の地点へ向かって時計周りに進む。弧の開始点と方向は、要素の幾何と同様利用空間における変換による影響を受ける。

The arc of an 'ellipse' element begins at the "3 o'clock" point on the radius and progresses towards the "9 o'clock" point. The starting point and direction of the arc are affected by the user space transform in the same manner as the geometry of the element.

Example ellipse01 では二つの楕円の座標が 'svg' 要素の viewBox 属性および 'g' と 'ellipse' 要素の transform 属性によって確立された利用座標系で指定されている。双方の楕円とも cx と cy 属性（楕円の中心）には既定値０が利用されている。二番目の楕円は回転されている。

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 attribute 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"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example 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>

Example ellipse01

この例を SVG で見る（ SVG 対応ブラウザのみ）

9.5 'line' 要素

'line' 要素は点から点への線分を定義する。

The 'line' element defines a line segment that starts at one point and ends at another.

<!ENTITY % SVG.line.extra.content "" >
<!ENTITY % SVG.line.element "INCLUDE" >
<![%SVG.line.element;[
<!ENTITY % SVG.line.content
    "(( %SVG.Description.class; )*, ( %SVG.Animation.class;
        %SVG.line.extra.content; )*)"
>
<!ELEMENT %SVG.line.qname; %SVG.line.content; >
<!-- end of SVG.line.element -->]]>
<!ENTITY % SVG.line.attlist "INCLUDE" >
<![%SVG.line.attlist;[
<!ATTLIST %SVG.line.qname;
    %SVG.Core.attrib;
    %SVG.Conditional.attrib;
    %SVG.Style.attrib;
    %SVG.Paint.attrib;
    %SVG.Color.attrib;
    %SVG.Opacity.attrib;
    %SVG.Graphics.attrib;
    %SVG.Marker.attrib;
    %SVG.Clip.attrib;
    %SVG.Mask.attrib;
    %SVG.Filter.attrib;
    %SVG.GraphicalEvents.attrib;
    %SVG.Cursor.attrib;
    %SVG.External.attrib;
    x1 %Coordinate.datatype; #IMPLIED
    y1 %Coordinate.datatype; #IMPLIED
    x2 %Coordinate.datatype; #IMPLIED
    y2 %Coordinate.datatype; #IMPLIED
    transform %TransformList.datatype; #IMPLIED
>

属性定義：

Attribute definitions:

x1 = "<coordinate>": 線分の始点のＸ座標。
この属性が指定されていない場合の効果は、値 "0" が指定されたときと同じになる。
アニメーション：可; The x-axis coordinate of the start of the line.
If the attribute is not specified, the effect is as if a value of "0" were specified.
y1 = "<coordinate>": 線分の始点のＹ座標。
この属性が指定されていない場合の効果は、値 "0" が指定されたときと同じになる。
アニメーション：可; The y-axis coordinate of the start of the line.
If the attribute is not specified, the effect is as if a value of "0" were specified.
x2 = "<coordinate>": 線分の終点のＸ座標。
この属性が指定されていない場合の効果は、値 "0" が指定されたときと同じになる。
アニメーション：可; The x-axis coordinate of the end of the line.
If the attribute is not specified, the effect is as if a value of "0" were specified.
y2 = "<coordinate>": 線分の終点のＹ座標。
この属性が指定されていない場合の効果は、値 "0" が指定されたときと同じになる。
アニメーション：可; The y-axis coordinate of the end of the line.
If the attribute is not specified, the effect is as if a value of "0" were specified.

他で定義されている属性：: %stdAttrs;, %langSpaceAttrs;, class, transform, %graphicsElementEvents;, %testAttrs;, externalResourcesRequired, style, %PresentationAttributes-Color;, %PresentationAttributes-FillStroke;, %PresentationAttributes-Graphics;

数学的には 'line' 要素は以下に述べる 'path' 要素と等価である：（注意：以下に現れる数値 x1, y1, x1, y2 は 'line' 要素の同じ名前の属性値をあらかじめ単位に従って利用座標系における値に換算したものとする）

Mathematically, a 'line' element can be mapped to an equivalent 'path' element as follows: (Note: all coordinate and length values are first converted into user space coordinates according to Units .)

座標 (x1, y1) への絶対 moveto 操作を行う。
perform an absolute moveto operation to absolute location (x1,y1), where x1 and y1 are the values of the 'line' element's x1 and y1 attributes converted to user space, respectively
座標 (x2, y2) への絶対 lineto 操作を行う。
perform an absolute lineto operation to absolute location (x2,y2), where x2 and y2 are the values of the 'line' element's x2 and y2 attributes converted to user space, respectively

'line' 要素は一本の線であり、幾何学的には一次元であるので内部を持たない。したがって 'line' 要素では決して内部への塗りが行われない（ 'fill' プロパティを見よ）

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).

Example line01 に 'svg' 要素の viewBox 属性によって確立された利用座標系で座標が指定される５つの異なる太さの線分を示す。

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"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example line01 - 利用座標系で指定された線分</desc>
  <!-- 'rect' 要素でキャンバスの境界を表示 -->
  <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

この例を SVG で見る（ SVG 対応ブラウザのみ）

9.6 'polyline' 要素

'polyline' 要素は１本以上の線分がつなげられた折線を定義する。一般に 'polyline' 要素は開いた図形を定義する。

The 'polyline' element defines a set of connected straight line segments. Typically, 'polyline' elements define open shapes.

<!ENTITY % SVG.polyline.extra.content "" >
<!ENTITY % SVG.polyline.element "INCLUDE" >
<![%SVG.polyline.element;[
<!ENTITY % SVG.polyline.content
    "(( %SVG.Description.class; )*, ( %SVG.Animation.class;
        %SVG.polyline.extra.content; )*)"
>
<!ELEMENT %SVG.polyline.qname; %SVG.polyline.content; >
<!-- end of SVG.polyline.element -->]]>
<!ENTITY % SVG.polyline.attlist "INCLUDE" >
<![%SVG.polyline.attlist;[
<!ATTLIST %SVG.polyline.qname;
    %SVG.Core.attrib;
    %SVG.Conditional.attrib;
    %SVG.Style.attrib;
    %SVG.Paint.attrib;
    %SVG.Color.attrib;
    %SVG.Opacity.attrib;
    %SVG.Graphics.attrib;
    %SVG.Marker.attrib;
    %SVG.Clip.attrib;
    %SVG.Mask.attrib;
    %SVG.Filter.attrib;
    %SVG.GraphicalEvents.attrib;
    %SVG.Cursor.attrib;
    %SVG.External.attrib;
    points %Points.datatype; #REQUIRED
    transform %TransformList.datatype; #IMPLIED
>

属性定義：

Attribute definitions:

points = "<list-of-points>": 折線を構成する一連の点。すべての座標は利用座標系におけるものである。
アニメーション：可; The points that make up the polyline. All coordinate values are in the user coordinate system.

奇数個の座標成分が指定されていた場合、その要素は不適切に指定された 'path' 要素に対するＵＡの振る舞いと同じ意味でエラーである。

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.

数学的には 'polyline' 要素は以下に述べる 'path' 要素と等価である：

Mathematically, a 'polyline' element can be mapped to an equivalent 'path' element as follows:

リストの最初の座標への絶対 moveto 操作を行う。
perform an absolute moveto operation to the first coordinate pair in the list of points
後に続く各座標について絶対 lineto 操作を行う。
for each subsequent coordinate pair, perform an absolute lineto operation to that coordinate pair.

次の Example polyline01 では 'svg' 要素の viewBox 属性によって確立された利用座標系における折線が指定されている。

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"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example polyline01 - 次第に大きくなる矩形波</desc>
  <!-- 'rect' 要素でキャンバスの境界を表示 -->
  <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

この例を SVG で見る（ SVG 対応ブラウザのみ）

9.7 'polygon' 要素

'polygon' 要素は複数のつながった線分で構成される多角形を定義する。

The 'polygon' element defines a closed shape consisting of a set of connected straight line segments.

<!ENTITY % SVG.polygon.extra.content "" >
<!ENTITY % SVG.polygon.element "INCLUDE" >
<![%SVG.polygon.element;[
<!ENTITY % SVG.polygon.content
    "(( %SVG.Description.class; )*, ( %SVG.Animation.class;
        %SVG.polygon.extra.content; )*)"
>
<!ELEMENT %SVG.polygon.qname; %SVG.polygon.content; >
<!-- end of SVG.polygon.element -->]]>
<!ENTITY % SVG.polygon.attlist "INCLUDE" >
<![%SVG.polygon.attlist;[
<!ATTLIST %SVG.polygon.qname;
    %SVG.Core.attrib;
    %SVG.Conditional.attrib;
    %SVG.Style.attrib;
    %SVG.Paint.attrib;
    %SVG.Color.attrib;
    %SVG.Opacity.attrib;
    %SVG.Graphics.attrib;
    %SVG.Marker.attrib;
    %SVG.Clip.attrib;
    %SVG.Mask.attrib;
    %SVG.Filter.attrib;
    %SVG.GraphicalEvents.attrib;
    %SVG.Cursor.attrib;
    %SVG.External.attrib;
    points %Points.datatype; #REQUIRED
    transform %TransformList.datatype; #IMPLIED
>

属性定義：

Attribute definitions:

points = "<list-of-points>": 多角形を構成する一連の点。すべての座標は利用座標系におけるものである。
アニメーション：可; The points that make up the polygon. All coordinate values are in the user coordinate system.

奇数個の座標成分が指定されていた場合、その要素は不適切に指定された 'path' 要素に対するＵＡの振る舞いと同じ意味でエラーである。

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.

数学的には 'polygon' 要素は以下に述べる 'path' 要素と等価である：

Mathematically, a 'polygon' element can be mapped to an equivalent 'path' element as follows:

リストの最初の座標への絶対 moveto 操作を行う。
perform an absolute moveto operation to the first coordinate pair in the list of points
後に続く各座標についても絶対 lineto 操作を行う。
for each subsequent coordinate pair, perform an absolute lineto operation to that coordinate pair
closepath 命令を行う。
perform a closepath command

次の Example polygon01 では 'svg' 要素の viewBox 属性により確立される利用座標系において二つの多角形（星型と六角形）が指定されている。

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"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example polygon01 - 星形と六角形</desc>
  <!-- 'rect' 要素でキャンバスの境界を表示 -->
  <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

この例を SVG で見る（ SVG 対応ブラウザのみ）

9.8 'polyline' および 'polygon' 要素における座標指定の構文

以下は 'polyline' と 'polygon' 要素を指定する点のリストの BNF 形式（ Backus-Naur Form ）による記述仕様である。次の表記が用いられる：

The following is the Backus-Naur Form (BNF) for points specifications in 'polyline' and 'polygon' elements. The following notation is used:

*： 0 個以上
+： 1 個以上
?： 0 個または 1 個
()：グループ化
|：どれか一つ
二重引用符で囲まれた部分はリテラル

list-of-points:
    wsp* coordinate-pairs? wsp*
coordinate-pairs:
    coordinate-pair
    | coordinate-pair comma-wsp coordinate-pairs
coordinate-pair:
    coordinate comma-wsp coordinate
coordinate:
    number
number:
    sign? integer-constant
    | sign? floating-point-constant
comma-wsp:
    (wsp+ comma? wsp*) | (comma wsp*)
comma:
    ","
integer-constant:
    digit-sequence
floating-point-constant:
    fractional-constant exponent?
    | digit-sequence exponent
fractional-constant:
    digit-sequence? "." digit-sequence
    | digit-sequence "."
exponent:
    ( "e" | "E" ) sign? digit-sequence
sign:
    "+" | "-"
digit-sequence:
    digit
    | digit digit-sequence
digit:
    "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9"
wsp:
    (#x20 | #x9 | #xD | #xA)+

9.9 Shape モジュール

要素	属性	内容モデル
path	Core.attrib, Conditional.attrib, External.attrib, Style.attrib, transform, d, pathLength, GraphicalEvents.attrib, Paint.attrib, Paint.attrib, Opacity.attrib, Graphics.attrib, Cursor.attrib, Filter.attrib, Mask.attrib, GraphicalEvents.attrib, Clip.attrib, Marker.attrib	(Description.class \| Animation.class)*
rect	Core.attrib, Conditional.attrib, Style.attrib, GraphicalEvents.attrib, Paint.attrib, Paint.attrib, Opacity.attrib, Graphics.attrib, Cursor.attrib, Filter.attrib, Mask.attrib, GraphicalEvents.attrib, Clip.attrib, x, y, width, height, rx, ry, transform	(Description.class \| Animation.class)*
circle	Core.attrib, Conditional.attrib, Style.attrib, GraphicalEvents.attrib, Paint.attrib, Paint.attrib, Opacity.attrib, Graphics.attrib, Cursor.attrib, Filter.attrib, Mask.attrib, GraphicalEvents.attrib, Clip.attrib, cx, cy, r, transform	(Description.class \| Animation.class)*
line	Core.attrib, Conditional.attrib, Style.attrib, GraphicalEvents.attrib, Paint.attrib, Paint.attrib, Opacity.attrib, Graphics.attrib, Cursor.attrib, Filter.attrib, Mask.attrib, GraphicalEvents.attrib, Clip.attrib, x1, y1, x2, y2, transform	(Description.class \| Animation.class)*
ellipse	Core.attrib, Conditional.attrib, Style.attrib, GraphicalEvents.attrib, Paint.attrib, Paint.attrib, Opacity.attrib, Graphics.attrib, Cursor.attrib, Filter.attrib, Mask.attrib, GraphicalEvents.attrib, Clip.attrib, cx, cy, rx, ry, transform	(Description.class \| Animation.class)*
polyline	Core.attrib, Conditional.attrib, Style.attrib, GraphicalEvents.attrib, Paint.attrib, Paint.attrib, Opacity.attrib, Graphics.attrib, Cursor.attrib, Filter.attrib, Mask.attrib, GraphicalEvents.attrib, Clip.attrib, points, transform	(Description.class \| Animation.class)*
polygon	Core.attrib, Conditional.attrib, Style.attrib, GraphicalEvents.attrib, Paint.attrib, Paint.attrib, Opacity.attrib, Graphics.attrib, Cursor.attrib, Filter.attrib, Mask.attrib, GraphicalEvents.attrib, Clip.attrib, points, transform	(Description.class \| Animation.class)*

9.9.1 Shape 内容セット

Shape モジュールは Shape.class 内容セットを定義する。

内容セット名	内容セットに含まれる要素
Shape.class	rect, circle, line, polyline, polygon, ellipse, path

9.10 DOM インターフェース

次に挙げるインターフェースが以下で定義される： SVGRectElement, SVGCircleElement, SVGEllipseElement, SVGLineElement, SVGAnimatedPoints, SVGPolylineElement, SVGPolygonElement

インターフェース SVGRectElement

SVGRectElement インターフェースは 'rect' 要素に対応する。

IDL 定義

interface SVGRectElement : 
                SVGElement,
                SVGTests,
                SVGLangSpace,
                SVGExternalResourcesRequired,
                SVGStylable,
                SVGTransformable,
                events::EventTarget { 
  readonly attribute SVGAnimatedLength x;
  readonly attribute SVGAnimatedLength y;
  readonly attribute SVGAnimatedLength width;
  readonly attribute SVGAnimatedLength height;
  readonly attribute SVGAnimatedLength rx;
  readonly attribute SVGAnimatedLength ry;
};

属性

readonly SVGAnimatedLength x: 'rect' 要素の x 属性に対応する。
readonly SVGAnimatedLength y: 'rect' 要素の y 属性に対応する。
readonly SVGAnimatedLength width: 'rect' 要素の width 属性に対応する。
readonly SVGAnimatedLength height: 'rect' 要素の height 属性に対応する。
readonly SVGAnimatedLength rx: 'rect' 要素の rx 属性に対応する。
readonly SVGAnimatedLength ry: 'rect' 要素の ry 属性に対応する。

インターフェース SVGCircleElement

SVGCircleElement インターフェースは 'circle' 要素に対応する。

IDL 定義

interface SVGCircleElement : 
                SVGElement,
                SVGTests,
                SVGLangSpace,
                SVGExternalResourcesRequired,
                SVGStylable,
                SVGTransformable,
                events::EventTarget { 
  readonly attribute SVGAnimatedLength cx;
  readonly attribute SVGAnimatedLength cy;
  readonly attribute SVGAnimatedLength r;
};

属性

readonly SVGAnimatedLength cx: 'circle' 要素の cx 属性に対応する。
readonly SVGAnimatedLength cy: 'circle' 要素の cy 属性に対応する。
readonly SVGAnimatedLength r: 'circle' 要素の r 属性に対応する。

インターフェース SVGEllipseElement

SVGEllipseElement インターフェースは 'ellipse' 要素に対応する。

IDL 定義

interface SVGEllipseElement : 
                SVGElement,
                SVGTests,
                SVGLangSpace,
                SVGExternalResourcesRequired,
                SVGStylable,
                SVGTransformable,
                events::EventTarget { 
  readonly attribute SVGAnimatedLength cx;
  readonly attribute SVGAnimatedLength cy;
  readonly attribute SVGAnimatedLength rx;
  readonly attribute SVGAnimatedLength ry;
};

属性

readonly SVGAnimatedLength cx: 'ellipse' 要素の cx 属性に対応する。
readonly SVGAnimatedLength cy: 'ellipse' 要素の cy 属性に対応する。
readonly SVGAnimatedLength rx: 'ellipse' 要素の rx 属性に対応する。
readonly SVGAnimatedLength ry: 'ellipse' 要素の ry 属性に対応する。

インターフェース SVGLineElement

SVGLineElement インターフェースは 'line' 要素に対応する。

IDL 定義

interface SVGLineElement : 
                SVGElement,
                SVGTests,
                SVGLangSpace,
                SVGExternalResourcesRequired,
                SVGStylable,
                SVGTransformable,
                events::EventTarget { 
  readonly attribute SVGAnimatedLength x1;
  readonly attribute SVGAnimatedLength y1;
  readonly attribute SVGAnimatedLength x2;
  readonly attribute SVGAnimatedLength y2;
};

属性

readonly SVGAnimatedLength x1: 'line' 要素の x1 属性に対応する。
readonly SVGAnimatedLength y1: 'line' 要素の y1 属性に対応する。
readonly SVGAnimatedLength x2: 'line' 要素の x2 属性に対応する。
readonly SVGAnimatedLength y2: 'line' 要素の y2 属性に対応する。

インターフェース SVGAnimatedPoints

SVGAnimatedPoints インターフェースは、座標のリストを保持するアニメーションが可能な 'points' 属性を持つ要素をサポートする。

更に、 points に対する変更は XML DOM （例えば getAttribute() メソッド呼び出し）によりアクセスされる元の要素の 'points' 属性に反映される。

IDL 定義

interface SVGAnimatedPoints { 
  readonly attribute SVGPointList   points;
  readonly attribute SVGPointList   animatedPoints;
};

属性

readonly SVGPointList points: points 属性の基底（即ち静的）内容へのアクセスを提供する。
readonly SVGPointList animatedPoints: 現在アニメーション中の points 属性の内容へのアクセスを提供する。与えられた属性またはプロパティがアニメーションされている場合、そのアニメーションされた値をとる。アニメーションされていない場合は 'points' と同じ値をとる。

インターフェース SVGPolylineElement

SVGPolylineElement インターフェースは 'polyline' 要素に対応する。

IDL 定義

interface SVGPolylineElement : 
                SVGElement,
                SVGTests,
                SVGLangSpace,
                SVGExternalResourcesRequired,
                SVGStylable,
                SVGTransformable,
                events::EventTarget,
                SVGAnimatedPoints {};

インターフェース SVGPolygonElement

SVGPolygonElement インターフェースは 'polygon' 要素に対応する。

IDL 定義

interface SVGPolygonElement : 
                SVGElement,
                SVGTests,
                SVGLangSpace,
                SVGExternalResourcesRequired,
                SVGStylable,
                SVGTransformable,
                events::EventTarget,
                SVGAnimatedPoints {};

前次目次要素属性プロパティ索引