polylineタグ -SVG内で折れ線を描画する｜HTML辞典
<polyline>タグとは？
<polyline> タグは、SVG（Scalable Vector Graphics）内で折れ線を描画するためのタグです。points 属性に一連の座標を指定することで、複数の点を結んだ折れ線を作成できます。
基本情報
コンテンツモデル
SVG コンテンツ（SVG Content）。
閉じタグの有無
<polyline> は 自己終了タグ（<polyline />）として使用可能 です。
基本的な記述方法
<svg width="200" height="200">
<polyline points="10,150 50,50 100,150 150,50 190,150" stroke="black" stroke-width="2" fill="none" />
</svg>
5 つの点を結んだ黒い折れ線が描画されます。
使用できる主な属性
| 属性名 | 説明 | 例 |
|---|---|---|
points | 折れ線の頂点を指定（X, Y の座標をスペースまたはカンマ区切りで記述） | <polyline points="10,10 50,50 90,10"> |
fill | 塗りつぶしの色（通常は none） | <polyline fill="none"> |
stroke | 線の色 | <polyline stroke="blue"> |
stroke-width | 線の太さ | <polyline stroke-width="3"> |
stroke-dasharray | 破線の設定 | <polyline stroke-dasharray="5,5"> |
破線の折れ線を描画する
<svg width="200" height="200">
<polyline points="10,100 50,50 100,100 150,50 190,100" stroke="red" stroke-width="3" stroke-dasharray="5,5" fill="none" />
</svg>
赤い破線の折れ線が描画されます。
CSSを使ったデザイン変更
SVG の要素には CSS を適用できます。
polyline {
stroke: green;
stroke-width: 4;
fill: none;
}
すべての <polyline> 要素に緑色の線が適用されます。
適切な使用例
points に複数の座標を指定して折れ線を描画する
<svg width="200" height="200">
<polyline points="10,150 50,50 100,150 150,50 190,150" stroke="black" stroke-width="2" fill="none" />
</svg>
stroke-dasharray を使って破線を作成する
<svg width="200" height="200">
<polyline points="10,100 50,50 100,100 150,50 190,100" stroke="blue" stroke-width="3" stroke-dasharray="4,2" fill="none" />
</svg>
fill を使って多角形のような形を描画する
<svg width="200" height="200">
<polyline points="50,50 150,50 100,150 50,50" stroke="black" stroke-width="2" fill="lightblue" />
</svg>
fill を指定すると、多角形のような図形を作成できます。
適切でない使用例（誤った使い方）
points を指定しない（描画されない）
<!-- NG: points 属性を省略 -->
<svg width="200" height="200">
<polyline stroke="black" stroke-width="2" fill="none" />
</svg>
正しい書き方（points を指定）
<svg width="200" height="200">
<polyline points="10,10 50,50 90,10" stroke="black" stroke-width="2" fill="none" />
</svg>
<polyline> を <svg> の外に記述する
<!-- NG: <svg> の外に <polyline> を記述 -->
<polyline points="10,50 50,100 90,50" stroke="black" />
<svg width="200" height="200"></svg>
正しい書き方（<svg> 内に記述）
<svg width="200" height="200">
<polyline points="10,50 50,100 90,50" stroke="black" />
</svg>
<polyline>タグと他のタグの違い
| タグ | 役割 | 特徴 | 適切な用途 |
|---|---|---|---|
<polyline> | 折れ線を描画 | points 属性で複数の点を指定 | 折れ線グラフや境界線 |
<polygon> | 閉じた多角形を描画 | points 属性で座標を指定 | 三角形や星形の作成 |
<line> | 直線を描画 | x1、y1、x2、y2 を指定 | 単純な直線の描画 |
<rect> | 長方形を描画 | x、y、width、height を指定 | 四角形のオブジェクト |
<path> | 任意の図形を描画 | d 属性でパスを指定 | 自由な曲線や形状 |
使用上の注意点
<polyline> は <svg> 内で使用する
- HTML の通常の構造では描画できないため、必ず
<svg>の中に記述する。
points を適切に指定する
- 複数の点を指定しないと描画されない。
stroke と stroke-width を活用してデザインを整える
- 線の色や太さを適用して、視認性を向上させる。
関連タグ
<svg>– SVG コンテンツを定義<rect>– 長方形を描画<circle>– 円を描画<ellipse>– 楕円を描画<line>– 直線を描画<polygon>– 多角形を描画<path>– 任意の図形を描画
まとめ
<polyline> タグは、SVG 内で 折れ線を描画するためのタグ です。
適切に使用することで、折れ線グラフや境界線などの作成に役立ちます。
