<rect x="X座標" y="Y座標" width="幅" height="高さ" rx="角X半径" ry="角Y半径" style="style data" />
長方形の左上角の座標を指定する。
長方形の左上角の座標を指定する。
長方形の幅を指定する。
長方形の高さを指定する。
角を丸める時に使用する。角は楕円の一部として表現できる。よって、縦方向と横方向の半径が指定できる。rxは横方向の半径である。
角を丸める時に使用する。角は楕円の一部として表現できる。よって、縦方向と横方向の半径が指定できる。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" /> |