SVG полилиния

Описание элемента `<polyline>`

Элемент SVG <polyline> создает любую фигуру, состоящую только из прямых линий, соединяющих несколько точек. В отличие от элемента <polygon>, <polyline> создает незамкнутые фигуры.

Пример элемента SVG `<polyline>`:

Пример элемента SVG <polyline>

html

<!DOCTYPE html>
<html>
 <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="220" >
      <polyline points="30,30 50,35 70,50 90,130 130,150 210,190" style="fill:none;stroke:purple;stroke-width:5" />
      Sorry, inline SVG isn't supported by your browser.
    </svg>
  </body>
</html>

Try it Yourself »

Чтобы задать форму, перечислите пары координат в атрибуте points. Разделяйте значения x и y каждой пары запятой, а сами пары — пробелом. Например: points="30,30 50,35 70,50".

Пример элемента SVG `<polyline>` с прямыми линиями:

Пример элемента SVG <polyline> с прямыми линиями

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="200" >
      <polyline points="10,50 50,50 50,90 90,90 90,130 130,130 130,170" style="fill:white;stroke:blue;stroke-width:5" />
      Sorry, inline SVG is not supported by your browser.
    </svg>
  </body>
</html>

Try it Yourself »

Атрибуты

Атрибут	Описание
points	Этот атрибут задает список точек (пары абсолютных координат x,y), необходимых для построения полилинии.
pathLength	Этот атрибут задает общую длину пути в пользовательских единицах.
stroke-linejoin	Задает тип угла, создаваемого при соединении двух линий.
stroke-linecap	Задает форму концов линий.

Элемент SVG <polyline> также поддерживает Глобальные атрибуты и Атрибуты событий.

Практика

Какие атрибуты можно использовать с элементом SVG <polyline> в HTML?

SVG полилиния ​

Описание элемента <polyline> ​

Пример элемента SVG <polyline>: ​

Пример элемента SVG <polyline> с прямыми линиями: ​