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
136
137
138
139
140
|
---
title: points
slug: Web/SVG/Attribute/points
translation_of: Web/SVG/Attribute/points
---
<div>{{SVGRef}}</div>
<p>L'attribut <code><strong>point</strong></code> 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.</p>
<p>Les éléments {{SVGElement("polyline")}} et {{SVGElement("polygon")}} utilisent cet attribut.</p>
<h2>Exemple</h2>
<pre class="brush: css hidden">html,body,svg { height:100% }</pre>
<pre class="brush: 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></pre>
<p>{{EmbedLiveSample('exemple', '100%', 200)}}</p>
<h2 id="polyline">polyline</h2>
<p>Pour un élément {{SVGElement('polyline')}}, <code>points</code> 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.</p>
<div class="note">
<p><strong>Note :</strong> Un polygone est une forme ouverte, ce qui implique que le dernier point n'est pas connecté au premier point.</p>
</div>
<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>
<h3 id="Exemple">Exemple</h3>
<pre class="brush: css hidden">html,body,svg { height:100% }</pre>
<pre class="brush: 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></pre>
<p>{{EmbedLiveSample('polyline', '100%', 200)}}</p>
<h2 id="polygon">polygon</h2>
<p>Pour un élément {{SVGElement('polyline')}}, <code>points</code> 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.</p>
<div class="note">
<p><strong>Note :</strong> Un polygone est une forme fermée, ce qui implique que le dernier point est connecté au premier.</p>
</div>
<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>
<h3 id="Example">Example</h3>
<pre class="brush: css hidden">html,body,svg { height:100% }</pre>
<pre class="brush: 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></pre>
<p>{{EmbedLiveSample('polygon', '100%', 200)}}</p>
<h2 id="Spécification">Spécification</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">Status</th>
<th scope="col">Commentaire</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("SVG2", "shapes.html#PolygonElementPointsAttribute", "points")}}</td>
<td>{{Spec2("SVG2")}}</td>
<td>Définition de <code><polygon></code></td>
</tr>
<tr>
<td>{{SpecName("SVG2", "shapes.html#PolylineElementPointsAttribute", "points")}}</td>
<td>{{Spec2("SVG2")}}</td>
<td>Définition de <code><polyline></code></td>
</tr>
<tr>
<td>{{SpecName("SVG1.1", "shapes.html#PolygonElementPointsAttribute", "points")}}</td>
<td>{{Spec2("SVG1.1")}}</td>
<td>Définition initiale de <code><polygon></code></td>
</tr>
<tr>
<td>{{SpecName("SVG1.1", "shapes.html#PolylineElementPointsAttribute", "points")}}</td>
<td>{{Spec2("SVG1.1")}}</td>
<td>Définition initiale de <code><polyline></code></td>
</tr>
</tbody>
</table>
|
