-
Notifications
You must be signed in to change notification settings - Fork 8.1k
/
index.md
132 lines (105 loc) · 3.03 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
---
title: points
slug: 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écifications
{{Specifications}}