== 基本図形 == line, rect, circle, ellipse, polygon, polyline があります。 ---- === line === 直線を定義する要素です (x1, y1) から (x2, y2) へ直線を引きます。 通常は単独タグで記述されます。 スタイルには次のものがあります。 * stroke-width * 線の太さ * stroke * 線の色 * stroke-opacity 不透明度です。0〜1の間の数値で指定します。 * stroke-dasharray 偶数個の数を並べて破線を表します。3 1 2 1 とすると1番目の線の長さが3、間隔が1、2番目の線の長さが2、間隔が1です。 例 {{{ }}} ---- === rect === 長方形を定義する要素です。 (x, y) を左上とし幅width 高さheightの長方形を描きます。 属性として rx, ry を指定すると角を丸くすることができます。rx, ry の値はxおよびy方向の半径です。 通常は単独タグで記述されます。 スタイルには line要素で示したものに加えて fill があります。 * fill 図形内部の色を指定します。 * fill-opacity 塗りの不透明度です。0〜1の間の数値で指定します。 例 {{{ }}} ---- === circle === 円を定義する要素です。 (cx, cy) を中心とし半径r の円を描きます。 通常は単独タグで記述されます。 スタイルは rect要素と同じです。 ---- === ellipse === 楕円を定義する要素です。 (cx, cy) を中心としx方向の半径rx,y方向の半径ry の円を描きます。 通常は単独タグで記述されます。 スタイルは rect要素と同じです。 ---- === polygon === 多角形を定義する要素です。 (x1,y1), (x2,y2), (x3,y3), ... , (xn,yn) を順につなぎ、さらに(xn,yn)と(x1,y1)をつないで多角形を描きます。<
> x1 y1 x2 y2 の区切りはカンマまたはスペース。 通常は単独タグで記述されます。 スタイルには rect要素で示したものに加えて fill-rule があります。 * fill-rule 線が交わっている多角形の場合の塗りの方法を指示します。 . nonzero とすると内側をすべて塗ります。 . evenodd とすると互い違いに塗ります。 例 {{{ }}} ---- === polyline === 折れ線を定義する要素です。 ほとんどpolygonと同じです。最後の点と最初の点は結ばれません。