SVGシェイプ
SVGは、開発者が使用できるいくつかの事前定義された形状要素があります。
- 四角形<rect>
- サークル<circle>
- 楕円<ellipse>
- 行<line>
- ポリライン<polyline>
- 多角形<polygon>
- パス<path>
次の章では、四角形要素から始めて、各要素について説明します。
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>
»それを自分で試してみてください Code explanation:
- 幅と高さの属性<rect>要素には、高さと矩形の幅を定義します
- style属性は、矩形のCSS特性を定義するために使用され
- CSSのfillプロパティは、四角形の塗りつぶしの色を定義します
- CSSストローク-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>
»それを自分で試してみてください Code explanation:
- x属性は、矩形の左の位置を定義します（例えば、x = "50"は左マージンから長方形50ピクセルを配置します）
- y属性は、矩形のトップの位置を定義し（例えば、Y = "20"を上部余白からの矩形20ピクセルを配置します）
- CSSのフィル不透明度プロパティは、塗りつぶしの色の不透明度を定義し(legal range: 0 to 1)
- CSSのストロークの不透明度プロパティは、ストロークの色の不透明度を定義し(legal range: 0 to 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>
»それを自分で試してみてください Code explanation:
- CSSの不透明度プロパティは、要素全体の不透明度の値を定義します(legal range: 0 to 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>
»それを自分で試してみてください Code explanation:
- RXとry属性は、長方形の角を丸めます