Latest web development tutorials

SVGポリゴン

SVGポリゴン - <ポリゴン>

例1

<ポリゴン>タグは、少なくとも三つの側面を含むグラフィックスを作成するために使用されます。

多角形は、形状が「閉」である直線(接続されているすべての行)です。

発言 ギリシャからポリゴン。 「ポリ」は、「多くの」、「坤 "手段"角度 "。

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

<SVGののxmlns = "http://www.w3.org/2000/svg"バージョン= "1.1">
<ポリゴンポイント= "200,10 250190 160210"
スタイル= "塗りつぶし:石灰;ストローク:紫;ストローク幅:1" />
</ SVG>

»をお試しください

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

コード解析:

  • 点のx、y座標は、ポリゴンの各コーナーのための属性の定義

例2

次の例では、4角形を作成します。

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

<SVGののxmlns = "http://www.w3.org/2000/svg"バージョン= "1.1">
<ポリゴンポイント= "220,10 300210 170250 123234"
スタイル= "塗りつぶし:石灰;ストローク:紫;ストローク幅:1" />
</ SVG>

»をお試しください

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


例3

スターを作成するために、<ポリゴン>要素を使用します。

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

<SVGののxmlns = "http://www.w3.org/2000/svg"バージョン= "1.1">
<ポリゴンポイント= "100,10 40180 190,60 10,60 160180」
スタイル= "塗りつぶし:石灰;ストローク:紫;ストローク幅:5;ルールを埋める:ゼロ以外;" />
</ SVG>

»をお試しください

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


例4

塗りつぶしルールの属性 "EVENODD」を変更します。

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

<SVGののxmlns = "http://www.w3.org/2000/svg"バージョン= "1.1">
<ポリゴンポイント= "100,10 40180 190,60 10,60 160180」
スタイル= "塗りつぶし:石灰;ストローク:紫;ストローク幅:5;ルールを埋める:EVENODDを;" />
</ SVG>

»をお試しください

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