<rect>要素は四角形を表します。
正方形や長方形を描くときには、<rect>要素要素を使います。<rect>要素で最低限必要な属性は次の通りです。
<rect x="20" y="20" width="80" height="80" stroke="black" fill="none" />
正方形を描くときには、width(幅)とheight(高さ)を同じ値にします。長方形はwidth(幅)かheight(高さ)のどちらかの値を大きくします。
主な属性を次の表に示します。
属性 | 解説 |
---|---|
x | 四角形の始点のX座標 |
y | 四角形の始点のY座標 |
width | 四角形の幅 |
height | 四角形の高さ |
rx | 角丸四角形の水平方向の角丸の半径 |
ry | 角丸四角形の垂直方向の角丸の半径 |
stroke | 線の色 |
stroke-width | 線の太さ |
fill | 四角形の塗り潰し色。塗り潰さない場合はnone。 |
fill="none"を指定しないと、長方形の内部が塗り潰されます。
次の例は、正方形と塗り潰した長方形を描くコードの例です。
<svg width="300" height="200" stroke="black" stroke-width="1px" >
<!-- 正方形 -->
<rect x="20" y="20" width="80" height="80" stroke="black" fill="none" />
<!-- 長方形 -->
<rect x="140" y="20" width="120" height="80" stroke="black" fill="gray" />
</svg>
実行すると次のように四角形が描かれます。
角が丸まった正方形を描くときには、<rect>要素に角の丸さを表すrxとry属性を指定します。 rxとryの値が大きければ大きいほど、矩形の丸さが増します(角丸の半径が増えます)。
次の例は角の丸い長方形を描くコードの例です。
<svg width="300" height="200" stroke="black" stroke-width="1px" fill="none">
<!-- 角丸正方形 -->
<rect x="20" y="20" width="80" height="80" stroke="black" rx="5" ry="5" />
<!-- 角丸長方形 -->
<rect x="140" y="20" width="120" height="80" stroke="black" rx="15" ry="15" />
</svg>
実行すると次のように四角形が描かれます。