SVG <rect>
SVGシェイプ
SVGには、開発者が使用できる事前定義された形状要素がいくつかあります。
- 長方形<rect>
- サークル<サークル>
- 楕円<楕円>
- 行<行>
- ポリライン<ポリライン>
- ポリゴン<ポリゴン>
- パス<パス>
次の章では、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の塗りつぶしプロパティは、長方形の塗りつぶしの色を定義します
- CSSのstroke-widthプロパティは、長方形の境界線の幅を定義します
- CSSストロークプロパティは、長方形の境界線の色を定義します
例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ピクセル配置します）
- y属性は、長方形の上部の位置を定義します（たとえば、y = "20"は、長方形を上マージンから20ピクセル配置します）
- CSSのfill-opacityプロパティは、塗りつぶしの色の不透明度を定義します（有効範囲：0から1）
- CSSのstroke-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属性は、長方形の角を丸めます。