SVGチュートリアル

SVG要素

SVG<polyline>で折れ線を描画

polyline要素はSVGの基本形状の一つで、複数のポイントを結ぶ一連の直線を作成するために使用されます。一般的には、最後のポイントが最初のポイントと結びつかない開いた形状を作成するために使用されます

折線のオンラインサンプル

折線の例示コードは以下の通りです:

例

<svg　width="120"　height="120"　
　　　　　viewPort="0　0　120　120"　version="1.1"
　　　　　xmlns="http://www.w3.org/2000/svg>
　　　　<polyline　fill="none"　stroke="black"　
　　　　　　　　　　　　　　points="20,100　40,60　70,80　100,20"/>
</svg>

テストを見てみる ‹/›

実行後の効果は以下の通りです:

三角形を描画します

以下は例示コードです:

例

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<polyline　points="0,0　　30,0　　15,30"
　　　　　　　　style="stroke:#006600;"/>
</svg>

テストを見てみる ‹/›

実行後の効果プレビューグラフ:

複数の線がポイントで示されています。各ポイントはpoints属性でx、yでリストされています。この例では3ポイントが三角形を定義しています。
以下の3ポイントを線で結び、塗りつぶします。デフォルトの塗りつぶし色は黒です。

緑色の三角形を描画します

以下は例示コードです:

例

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<polyline　points="10,2　　60,2　　35,52"
　　　　　　　　style="stroke:#006600;　stroke-width:　2;
　　　　　　　　　　　　　　　fill:　#33cc33;"/>
</svg>

テストを見てみる ‹/›

実行後の効果プレビューグラフ:

あなたは、三角形の中で緑色の線で描かれた線が2本しかないことに気づいたかもしれません。その理由は、リストに記載されている点間のみを線で描画しているからです。最初の点に戻る線は描画されていません。そのため、以下のようにpoints属性に最初の点を再度追加します:

例

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<polyline　points="10,2　　60,2　　35,52　　10,2"
　　　　　　　　style="stroke:#006600;　fill:　#33cc33;"/>
</svg>

テストを見てみる ‹/›

このstyle属性は線の色と太さ、および塗りつぶし色を設定します。

SVG<polygon>で多角形を描画 SVG<line>で直線を描画