rect

書き方

<rect x="X座標" y="Y座標" width="幅" height="高さ" rx="角X半径" ry="角Y半径" style="style data" />

x="X座標"

長方形の左上角の座標を指定する。

y="Y座標"

長方形の左上角の座標を指定する。

width="幅"

長方形の幅を指定する。

height="高さ"

長方形の高さを指定する。

rx="角X半径"

角を丸める時に使用する。角は楕円の一部として表現できる。よって、縦方向と横方向の半径が指定できる。rxは横方向の半径である。

ry="角Y半径"

角を丸める時に使用する。角は楕円の一部として表現できる。よって、縦方向と横方向の半径が指定できる。ryは縦方向の半径である。

使用例

ごく普通の長方形。

<rect x="50" y="20" width="100" height="80" style="fill:none; stroke:black; stroke-width:2" />

角を丸くしてみる。

<rect x="50" y="20" width="100" height="80" rx="30" ry="30" style="fill:none; stroke:black; stroke-width:2" />

角の半径を変えてみる。

<rect x="50" y="20" width="100" height="80" rx="50" ry="20" style="fill:none; stroke:black; stroke-width:2" />
<rect x="50" y="20" width="100" height="80" rx="20" ry="40" style="fill:none; stroke:black; stroke-width:2" />

角の丸みを最大にして、楕円を描く。左上座標を基準に描きたい場合便利かも。

<rect x="50" y="20" width="100" height="80" rx="50" ry="40" style="fill:none; stroke:black; stroke-width:2" />