rect

<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>
  

実行すると次のように四角形が描かれます。


関連項目

circle


SVG目次 inserted by FC2 system