- 2008年7月23日 20:53
- Polygon & Polyline element
Polygon element(ポリゴン要素)と Polyline element (ポリライン要素)で描く
Polygon element と Polyline element には、points属性があります。 Polygonは下の図のように各点を結ぶ線の始点と終点が結ばれていますが、 Polylineは始点と終点が指定された位置になります。（黒い丸点はパスを分かり易く見えるようにしたものです。）
points = 図形を線で結ぶためのX軸Y軸を指定した各点
SVGがサポートされていないブラウザでは、SVG Viewerプラグインをインストールしてください。
IEで、Adobe SVG Viewer をインストールしてあれば、Altキーを押したまま上の画面をマウスでドラッグすれば動きます。また、Ctrlキーを押してクリックでズームイン、Ctrl + Shift キーを押してクリックするとズームアウトすることができます。
左上の "defs" はポリラインとポリゴンのパスだけを定義したものです。スタイル属性は何も指定されていません。
その下の☆型の図形は、フィルの色をオレンジに、ストロークの色を青にしています。ポリゴンはストロークが繋がっていますが、ポリラインは最後に指定したパスでストロークは終了しています。
スタイル属性を何も指定しなければポリゴンもポリラインもフィルの部分のみが黒になります。右下は、フィルの色を無くしてストロークの色と幅のみを指定したものです。
色の名称はこちらを参考：Name, Hex, RGB of Color
下のコードは上のSVGファイルのコードです。
