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
|
---
title: points
slug: Web/SVG/Attribute/points
translation_of: Web/SVG/Attribute/points
---
{{SVGRef}}
L'attribut **`point`** défini une liste de points. Chaque point est défini par deux nombres représentant les coordonnées X et Y dans le système de coordonnées de l'utilisateur. Si une coordonnées est dépareillée elle sera ignorée.
Les éléments {{SVGElement("polyline")}} et {{SVGElement("polygon")}} utilisent cet attribut.
## Exemple
```css hidden
html,body,svg { height:100% }
```
```html
<svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg">
<!-- polyline est une forme ouverte -->
<polyline stroke="black" fill="none"
points="50,0 21,90 98,35 2,35 79,90"/>
<!-- polygon est une forme fermée -->
<polygon stroke="black" fill="none" transform="translate(100,0)"
points="50,0 21,90 98,35 2,35 79,90"/>
<!--
Il est généralement recommendé de séparer les valeurs X et Y
avec une virgule et les coordonées avec des espaces.
Cela est plus lisible.
-->
</svg>
```
{{EmbedLiveSample('exemple', '100%', 200)}}
## polyline
Pour un élément {{SVGElement('polyline')}}, `points` défini une liste de point, chaqu'un représente le vecteur pour tracer la ligne. Chaque point est défini par X et Y dans le système de coordonées de l'utilisateur.
> **Note :** Un polygone est une forme ouverte, ce qui implique que le dernier point n'est pas connecté au premier point.
<table class="properties">
<tbody>
<tr>
<th scope="row">Valeur</th>
<td>[ {{cssxref("number")}}+ ]#</td>
</tr>
<tr>
<th scope="row">Valeur par défaut</th>
<td><em>aucune</em></td>
</tr>
<tr>
<th scope="row">Peut être animé</th>
<td>Oui</td>
</tr>
</tbody>
</table>
### Exemple
```css hidden
html,body,svg { height:100% }
```
```html
<svg viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg">
<!-- polyline est une forme ouverte -->
<polyline stroke="black" fill="none"
points="50,0 21,90 98,35 2,35 79,90"/>
</svg>
```
{{EmbedLiveSample('polyline', '100%', 200)}}
## polygon
Pour un élément {{SVGElement('polyline')}}, `points` défini une liste de point, chaqu'un représente le vecteur pour tracer la ligne. Chaque point est défini par X et Y dans le système de coordonées de l'utilisateur.
> **Note :** Un polygone est une forme fermée, ce qui implique que le dernier point est connecté au premier.
<table class="properties">
<tbody>
<tr>
<th scope="row">Valeur</th>
<td>[ {{cssxref("number")}}+ ]#</td>
</tr>
<tr>
<th scope="row">Valeur par défaut</th>
<td><em>aucune</em></td>
</tr>
<tr>
<th scope="row">Peut être animé</th>
<td>Oui</td>
</tr>
</tbody>
</table>
### Example
```css hidden
html,body,svg { height:100% }
```
```html
<svg viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg">
<!-- polygon est une forme fermée -->
<polygon stroke="black" fill="none"
points="50,0 21,90 98,35 2,35 79,90" />
</svg>
```
{{EmbedLiveSample('polygon', '100%', 200)}}
## Spécification
| Spécification | Status | Commentaire |
| -------------------------------------------------------------------------------------------------------- | ------------------------ | ----------------------------------- |
| {{SpecName("SVG2", "shapes.html#PolygonElementPointsAttribute", "points")}} | {{Spec2("SVG2")}} | Définition de `<polygon>` |
| {{SpecName("SVG2", "shapes.html#PolylineElementPointsAttribute", "points")}} | {{Spec2("SVG2")}} | Définition de `<polyline>` |
| {{SpecName("SVG1.1", "shapes.html#PolygonElementPointsAttribute", "points")}} | {{Spec2("SVG1.1")}} | Définition initiale de `<polygon>` |
| {{SpecName("SVG1.1", "shapes.html#PolylineElementPointsAttribute", "points")}} | {{Spec2("SVG1.1")}} | Définition initiale de `<polyline>` |
|
