<polyline>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Some parts of this feature may have varying levels of support.

<polyline>SVG 要素で、複数の点を結ぶ直線を作成する SVG の基本図形です。一般的に polyline は開いた図形を作成するために用いられます。最後の点は最初の点に接続されている必要はないからです。閉じた図形については <polygon> 要素を参照してください。

html
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Example of a polyline with the default fill -->
  <polyline points="0,100 50,25 50,75 100,0" />

  <!-- Example of the same polyline shape with stroke and no fill -->
  <polyline points="100,100 150,25 150,75 200,0" fill="none" stroke="black" />
</svg>

属性

points

この属性は、連続線を描画するのに必要な点(x,y の絶対座標の組)のリストを定義します。 値の型: <number>+ ; 既定値: ""; アニメーション:

pathLength

この属性は、パスの全長をユーザー単位で指定します。 値の型: <number> ; 既定値: none; アニメーション:

使用可能な場所

カテゴリー基本シェイプ要素、グラフィック要素、図形要素
許可されている内容任意の数、任意の順序の以下の要素。
アニメーション要素
説明的要素

仕様書

Specification
Scalable Vector Graphics (SVG) 2
# PolylineElement

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
polyline
fill
context-fill value
points
systemLanguage

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

関連情報