SVG <rect>

SVG 形状

SVG には開発者が使用できるプレセットの形状要素があります：

• 矩形 <rect>
• 円 <circle>
• 楕円形 <ellipse>
• 直線 <line>
• 折れ線 <polyline>
• ポリゴン <polygon>
• パス <path>

次の章では、rect 要素から各要素について説明を始めます。

SVG 矩形 - <rect>

例 1

<rect> 要素は、矩形や矩形の変形を作成するために使用されます：

これは SVG コードです：

<svg width="400" height="110">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

自分で試してみる

コードの説明：

• <rect> 要素の width と height 属性は、矩形の高さと幅を定義します
• style 属性は、矩形の CSS 属性を定義するために使用されます
• CSS fill 属性は、矩形の塗りつぶし色を定義します
• CSS border-width 属性は、矩形の枠線の幅を定義します
• CSS stroke 属性は、矩形の枠線の色を定義します

例2

新しい属性を持つ別の例を見てみましょう：

これは SVG コードです：

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
</svg>

自分で試してみる

コードの説明：

• x 属性は、矩形の左側位置を定義します（例えば x="50" では、左外縁から 50 px の位置に矩形を配置します）
• y 属性は、矩形の上部位置を定義します（例えば y="20" では、上外縁から 20 px の位置に矩形を配置します）
• CSS fill-opacity 属性は、塗りつぶし色の不透明度を定義します（有効範囲：0 から 1）
• CSS border-opacity 属性は、線色の不透明度を定義します（有効範囲：0 から 1）

例3

要素全体の不透明度を定義します：

これは SVG コードです：

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />
</svg>

自分で試してみる

コードの説明：

• CSS opacity 属性は、要素全体の不透明度値を定義します（有効範囲：0 から 1）

例4

最後の例で、角が丸い矩形を作成します：

これは SVG コードです：

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

自分で試してみる

コードの説明：

• rxおよびry属性で矩形の角を丸くする