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
<!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>
|
Output:
Example 2:
HTML
<!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>
|
Output:
Supported Browsers:
- Chrome
- Edge
- Opera
- Internet Explorer
- Safari
- Firefox
Article Tags :
Recommended Articles
1. SVG Polyline