SVG Polyline element
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
.png)
