The points
attribute defines a list of points. Each point is defined by a pair of number representing a X and a Y coordinate in the user coordinate system. If the attribute contains an odd number of coordinates, the last one will be ignored.
Two elements are using this attribute: <polyline>
, and <polygon>
<svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg">
<!-- polyline is an open shape -->
<polyline stroke="black" fill="none"
points="50,0 21,90 98,35 2,35 79,90"/>
<!-- polygon is a closed shape -->
<polygon stroke="black" fill="none" transform="translate(100,0)"
points="50,0 21,90 98,35 2,35 79,90"/>
<!--
It is usually considered best practices to separate a X and Y
coordinate with a comma and a group of coordinates by a space.
It makes things more readable for human beings.
-->
</svg>
polyline
For <polyline>
, points
defines a list of points, each representing a vertex of the line to be drawn. Each point is define by a X and Y coordinate in the user coordinate system.
Note: A polyline is an open shape, meaning the last point is not connected to the first point.
Value | [ <number> + ]# |
---|---|
Default value | none |
Animatable | Yes |
Example
<svg viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg">
<!-- polyline is an open shape -->
<polyline stroke="black" fill="none"
points="50,0 21,90 98,35 2,35 79,90"/>
</svg>
polygon
For <polygon>
, points
defines a list of points, each representing a vertex of the shape to be drawn. Each point is define by a X and Y coordinate in the user coordinate system.
Note: A polygon is a closed shape, meaning the last point is connected to the first point.
Value | [ <number> + ]# |
---|---|
Default value | none |
Animatable | Yes |
Example
<svg viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg">
<!-- polygon is an closed shape -->
<polygon stroke="black" fill="none"
points="50,0 21,90 98,35 2,35 79,90" />
</svg>
Specifications
Specification | Status | Comment |
---|---|---|
Scalable Vector Graphics (SVG) 2 The definition of 'points' in that specification. |
Candidate Recommendation | Definition for <polygon> |
Scalable Vector Graphics (SVG) 2 The definition of 'points' in that specification. |
Candidate Recommendation | Definition for <polyline> |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'points' in that specification. |
Recommendation | Initial definition for <polygon> |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'points' in that specification. |
Recommendation | Initial definition for <polyline> |