SVG <rect>

SVG の形状

SVG には、開発者用に定義された shape 要素があります：

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

次の章では、矩形から、順次各要素について説明します。

SVG 矩形 - <rect>

例 1

<rect> 要素は、矩形や矩形のバリエーションを作成するために使用します：

SVG コードは次の通りです：

コードの説明：

• <rect> 要素の width と height 属性は、矩形の幅と高さを定義します
• style 属性は、矩形の CSS プロパティを定義するために使用します
• CSS fill プロパティは、矩形を塗つぶす色を定義します
• CSS stroke-width プロパティは、矩形のボーダーの幅を定義します
• CSS stroke プロパティは、矩形のボーダーの色を定義します

例 2

次に、いくつかの新しい属性が含まれている別の例を見てみましょう：

SVG コードは次の通りです：

コードの説明：

• x 属性は、矩形の左の位置を定義します（例えば、x="50" は、左マージンから 50 px に矩形を配置します）
• y 属性は、矩形の上の位置を定義します（例えば、y="20" は、上マージンから 20 px に矩形を配置します）
• CSS fill-opacity プロパティは、塗りつぶしの色の不透明度を定義します（有効な範囲：0 ～ 1）
• CSS stroke-opacity プロパティは、ストロークの色の不透明度を定義します（有効な範囲：0 ～ 1）

例 3

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

SVG コードは次の通りです：

コードの説明：

• CSS opacity プロパティは、要素全体の不透明度の値を定義します（有効な範囲：0 ～ 1）

例 4

最後の例として、角丸の矩形を作成します：

SVG コードは次の通りです：

コードの説明：

• rx と ry 属性は、矩形の角を丸めます