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 > |
chevron_right
filter_none
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 > |
chevron_right
filter_none
Output:
Supported Browsers:
- Chrome
- Edge
- Opera
- Internet Explorer
- Safari
- Firefox