SVGの長方形

SVGシェイプ

SVGは、いくつかの事前定義された形状要素を持って使用して動作させるために開発者が使用することができます。

• 四角形<RECT>
• ラウンド<円>
• オーバル<楕円>
• 行<line>
• ポリライン<ポリライン>
• 多角形<ポリゴン>
• パスの<path>

次のセクションでは、長方形の要素から始めて、あなたにこれらの要素を説明します。

SVG長方形 - <RECT>

例1

<のRect>タグは、長方形、および長方形のバリアントを作成するために使用されます：

ここではSVGのコードは次のとおりです。

オペラユーザーの場合： ビューSVGファイル （プレビューソースSVGグラフィック上で右クリックします）。

コード解析：

• 幅と高さは、矩形要素は矩形の高さと幅を定義する属性
• スタイルプロパティは、CSSプロパティを定義するために使用され
• CSSは、矩形の塗りつぶしの色（RGB値、色の名前または16進値）を定義するプロパティを埋めます
• ストローク幅のCSSプロパティの幅は、矩形の境界線を定義します
• ストロークの色のCSSプロパティは、矩形の境界線を定義します

例2

別の例を見てみましょう、それは、新しいプロパティの数が含まれています。

ここでSVGコードは次のとおりです。

オペラユーザーの場合： ビューSVGファイル （プレビューソースSVGグラフィック上で右クリックします）。

コード解析：

• Xの属性は、矩形の左の位置を定義する（例えば、Xが= "0"ブラウザウィンドウの左側に矩形を定義するために、距離が0PX）
• トップ位置y属性が矩形を定義（例えば、Y = "0"は、ブラウザウィンドウの上部に長方形の定義からである0PX）
• CSSのフィル不透明度プロパティは、塗りつぶし色の透明度を定義し（法的範囲：0--1）
• CSSのストロークの不透明度プロパティはストロークの色の透明度を定義します（有効範囲：0--1）

例3

素子全体の不透明度を定義します。

ここではSVGのコードは次のとおりです。

オペラユーザーの場合： ビューSVGファイル （プレビューソースSVGグラフィック上で右クリックします）。

• CSSの不透明度プロパティは、透明要素（：0-1の範囲）の値を定義します。

例4

最後の例では、角の丸い四角形を作成します。

ここではSVGのコードは次のとおりです。

オペラユーザーの場合： ビューSVGファイル （プレビューソースSVGグラフィック上で右クリックします）。

• R x及びR y属性は、角の丸い四角形を生成することができます。