-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
135 lines (109 loc) · 3.11 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
---
title: points
slug: Web/SVG/Attribute/points
page-type: svg-attribute
spec-urls:
- https://svgwg.org/svg2-draft/shapes.html#PolygonElementPointsAttribute
- https://svgwg.org/svg2-draft/shapes.html#PolylineElementPointsAttribute
---
{{SVGRef}}
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.
You can use this attribute with the following SVG elements:
- {{SVGElement("polyline")}}
- {{SVGElement("polygon")}}
## Example
```css hidden
html,
body,
svg {
height: 100%;
}
```
```html
<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>
```
{{EmbedLiveSample("Example", '100%', 200)}}
## polyline
For {{SVGElement('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.
<table class="properties">
<tbody>
<tr>
<th scope="row">Value</th>
<td>[ {{cssxref("number")}}+ ]#</td>
</tr>
<tr>
<th scope="row">Default value</th>
<td><em>none</em></td>
</tr>
<tr>
<th scope="row">Animatable</th>
<td>Yes</td>
</tr>
</tbody>
</table>
```css hidden
html,
body,
svg {
height: 100%;
}
```
```html
<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>
```
{{EmbedLiveSample('polyline', '100%', 200)}}
## polygon
For {{SVGElement('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.
<table class="properties">
<tbody>
<tr>
<th scope="row">Value</th>
<td>[ {{cssxref("number")}}+ ]#</td>
</tr>
<tr>
<th scope="row">Default value</th>
<td><em>none</em></td>
</tr>
<tr>
<th scope="row">Animatable</th>
<td>Yes</td>
</tr>
</tbody>
</table>
```css hidden
html,
body,
svg {
height: 100%;
}
```
```html
<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>
```
{{EmbedLiveSample('polygon', '100%', 200)}}
## Specifications
{{Specifications}}