SVG points Attribute
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:
HTML
<!DOCTYPE html> < html > < body > < div style = "color: green;" > < h1 > w3wiki </ 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:
HTML
<!DOCTYPE html> < html > < body > < div style = "color: green;" > < h1 > w3wiki </ 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: