The points attribute describes a list of points for the polygon or polyline element. If it contains an odd pair of coordinates, the last one will be ignored.
Elements that are using this attribute:
- <polyline> element
- <polygon> element
Syntax:
points = numbers
Attribute Values: The points attribute accepts the values mentioned above and described below
- numbers: It is the pair of integers separated by a comma and a group of coordinates separated by a space representing an X and a Y coordinate in the user coordinate system. Its default value is considered as none.
The below examples illustrate the use of the points attribute.
Example 1:
<!DOCTYPE html>
<html>
<body>
<div style="color: green;">
<h1>
GeeksforGeeks
</h1>
<h4 style="color: black;">
Using Polyline element
</h4>
<svg viewBox="100 0 520 100"
xmlns="http://www.w3.org/2000/svg">
<polyline stroke="green" fill="none"
points="100,100 150,25 150,75 200,0"/>
</svg>
</div>
</body>
</html>
Output:
Example 2:
<!DOCTYPE html>
<html>
<body>
<div style="color: green;">
<h1>
GeeksforGeeks
</h1>
<h4 style="color: black;">
Using Polygon element
</h4>
<svg viewBox="100 0 520 100"
xmlns="http://www.w3.org/2000/svg">
<polygon stroke="green" fill="none"
points="100,100 150,25 150,75 200,0"/>
</svg>
</div>
</body>
</html>
Output:
