SVG points Attribute
Last Updated :
31 Mar, 2022
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 >
GeeksforGeeks
</ h1 >
< h4 style = "color: black;" >
Using Polyline element
</ h4 >
< svg viewBox = "100 0 520 100"
< 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 >
GeeksforGeeks
</ h1 >
< h4 style = "color: black;" >
Using Polygon element
</ h4 >
< svg viewBox = "100 0 520 100"
< polygon stroke = "green" fill = "none"
points = "100,100 150,25 150,75 200,0" />
</ svg >
</ div >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...