Related Articles

Related Articles

SVG Polyline element
  • Last Updated : 07 Aug, 2020

The <polyline> element of SVG in HTML is used to create a shape by connecting lines through different points. It is different from <polygon> as it can be used to create open shapes.

Syntax:

<polyline points="Pair of points required to draw the shape"
      stroke="stroke color"
      fill="fill color for colored closed shapes">

Attributes:

  • points: Pair of points required to draw the shape
  • pathLength: It tells the total length of the path.

Few examples are given below for a better understanding of the <polyline> SVG element.

Example 1:



HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" 
        content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  svg{
    background-color: black;
  }
</style>
<body>
  polyline <br>  
  <svg width="200px" height="200px">
    <polyline points="100,150 10,250 180,17 50,100"
              fill="green" stroke="yellow" 
              stroke-width="5">
  </svg><br>
  polygon <br>
  <svg width="200px" height="200px">
    <polygon points="100,150 10,250 180,17 50,100"
             fill="green" stroke="yellow" 
             stroke-width="5">
  </svg>
</body>
</html>

chevron_right


Output:

Example 2:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" 
        content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  svg{
    background-color: black;
  }
</style>
<body>
  polyline <br>  
  <svg width="200px" height="200px">
    <polyline points="100,105 180,20 100,17 50,100"
              stroke="yellow" stroke-width="5">
  </svg><br>
  polygon <br>
  <svg width="200px" height="200px">
    <polygon points="100,105 180,20 100,17 50,100"
             stroke="yellow" stroke-width="5">
  </svg>
</body>
</html>

chevron_right


Output:

Supported Browsers: 

  • Chrome
  • Edge
  • Opera
  • Internet Explorer
  • Safari
  • Firefox

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :