基本図形

line, rect, circle, ellipse, polygon, polyline があります。

line

直線を定義する要素です

• <line x1="start-x" y1="start-y" x2="end-x" y2="end-y">

(x1, y1) から (x2, y2) へ直線を引きます。

通常は単独タグで記述されます。 スタイルには次のものがあります。

• stroke-width
• 線の太さ
• stroke
• 線の色
• stroke-opacity 不透明度です。０〜１の間の数値で指定します。
• stroke-dasharray 偶数個の数を並べて破線を表します。3 1 2 1 とすると１番目の線の長さが３、間隔が１、２番目の線の長さが２、間隔が１です。

例

•  <line x1="10" y1="20" x2="50" y2="40" style="stroke:red; stroke-dasharray:3 1 2 1; stroke-width:2; " />

rect

長方形を定義する要素です。

• <rect x="start-x" y="start-y" width="width" height="height">

(x, y) を左上とし幅width 高さheightの長方形を描きます。

属性として rx, ry を指定すると角を丸くすることができます。rx, ry の値はｘおよびｙ方向の半径です。

通常は単独タグで記述されます。 スタイルには line要素で示したものに加えて fill があります。

• fill 図形内部の色を指定します。
• fill-opacity 塗りの不透明度です。０〜１の間の数値で指定します。

例

•  <rect x="50" y="25" width="100" height="50" rx="5" ry="5" style="fill:#00ccdd; stroke:#ff8800; " />

circle

円を定義する要素です。

• <circle cx="center-x" cy="center-y" r="radius">

(cx, cy) を中心とし半径r の円を描きます。

通常は単独タグで記述されます。 スタイルは rect要素と同じです。

ellipse

楕円を定義する要素です。

• <ellipse cx="center-x" cy="center-y" rx="radius-x" ry="radius-y">

(cx, cy) を中心としx方向の半径rx,y方向の半径ry の円を描きます。

通常は単独タグで記述されます。 スタイルは rect要素と同じです。

polygon

多角形を定義する要素です。

• <polygon points="x1 y1 x2 y2 x3 y3 ... ">

(x1,y1), (x2,y2), (x3,y3), ... , (xn,yn) を順につなぎ、さらに(xn,yn)と(x1,y1)をつないで多角形を描きます。
x1 y1 x2 y2 の区切りはカンマまたはスペース。

通常は単独タグで記述されます。 スタイルには rect要素で示したものに加えて fill-rule があります。

• fill-rule 線が交わっている多角形の場合の塗りの方法を指示します。
  • nonzero とすると内側をすべて塗ります。
  • evenodd とすると互い違いに塗ります。

例

•  <polygon points="48,16  16,96  96,48  0,48  80,96" style="fill-rule:evenodd; fill:black; stroke:none;" />

polyline

折れ線を定義する要素です。

• <polyline points="x1 y1 x2 y2 x3 y3 ... ">

ほとんどpolygonと同じです。最後の点と最初の点は結ばれません。