files/fr/web/svg/attribute/stroke-linecap/index.html


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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193

---
title: stroke-linecap
slug: Web/SVG/Attribute/stroke-linecap
tags:
  - SVG
  - SVG Attribute
translation_of: Web/SVG/Attribute/stroke-linecap
---
<div>{{SVGRef}}</div>

<p>L'attribut <strong><code>stroke-linecap</code></strong> définit la forme de la fin des lignes SVG.</p>

<p class="note"><strong>Note:</strong> <code>stroke-linecap</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p>

<p>Cet attribut peut être appliqué à tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polyline')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}</p>

<div id="topExample">
<div class="hidden">
<pre class="brush: css">html,body,svg { height:100% }</pre>
</div>

<pre class="brush: html">&lt;svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"&gt;

  &lt;!-- Effet de la valeur "butt" (valeur par défaut) --&gt;
  &lt;line x1="1" y1="1" x2="5" y2="1" stroke="black"
        stroke-linecap="butt" /&gt;

  &lt;!-- Effet de la valeur "round" --&gt;
  &lt;line x1="1" y1="3" x2="5" y2="3" stroke="black"
        stroke-linecap="round" /&gt;

  &lt;!-- Effet de la valeur "square" --&gt;
  &lt;line x1="1" y1="5" x2="5" y2="5" stroke="black"
        stroke-linecap="square" /&gt;

  &lt;!--
  Les lignes roses indiquent la position
  du chemin pour chaque trait
  --&gt;
  &lt;path d="M1,1 h4 M1,3 h4 M1,5 h4" stroke="pink" stroke-width="0.025" /&gt;
&lt;/svg&gt;
</pre>

<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p>
</div>

<h2 id="Notes_d'usage">Notes d'usage</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">Valeur</th>
   <td><code>butt</code> | <code>round</code> | <code>square</code></td>
  </tr>
  <tr>
   <th scope="row">Valeur par défaut</th>
   <td><code>butt</code></td>
  </tr>
  <tr>
   <th scope="row">Animation</th>
   <td>Oui</td>
  </tr>
 </tbody>
</table>

<h3 id="butt">butt</h3>

<p>La valeur <code>butt</code> indique que le trait de chaque chemin ne s'étend pas au-delà de ses extremités. Un chemin de longueur zéro ne s'affichera pas du tout.</p>

<h4 id="Exemple">Exemple</h4>

<div class="hidden">
<pre class="brush: css">html,body,svg { height:100% }</pre>
</div>

<pre class="brush: html">&lt;svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"&gt;

  &lt;!-- Effet de la valeur "butt" --&gt;
  &lt;path d="M1,1 h4" stroke="black"
        stroke-linecap="butt" /&gt;

  &lt;!-- Effet de la valeur "butt" sur un chemin de longueur zéro --&gt;
  &lt;path d="M3,3 h0" stroke="black"
        stroke-linecap="butt" /&gt;


  &lt;!--
  Lignes roses pour indiquer la position
  du chemin pour chaque trait
  --&gt;
  &lt;path d="M1,1 h4" stroke="pink" stroke-width="0.025" /&gt;
  &lt;circle cx="1" cy="1" r="0.05" fill="pink" /&gt;
  &lt;circle cx="5" cy="1" r="0.05" fill="pink" /&gt;
  &lt;circle cx="3" cy="3" r="0.05" fill="pink" /&gt;
&lt;/svg&gt;
</pre>

<p>{{EmbedLiveSample('butt', '100%', 200)}}</p>

<h3 id="round">round</h3>

<p>La valeur <code>round</code> indique que la fin de chaque trait sera prolongé d'un demi-cerlce de diamètre égal à la la largeur du trait. Pour un chemin de longueur zéro, un cercle complet est affiché.</p>

<h4 id="Exemple_2">Exemple</h4>

<div class="hidden">
<pre class="brush: css">html,body,svg { height:100% }</pre>
</div>

<pre class="brush: html">&lt;svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"&gt;

  &lt;!-- Effet de la valeur "round" --&gt;
  &lt;path d="M1,1 h4" stroke="black"
        stroke-linecap="round" /&gt;

  &lt;!-- Effet de la valeur "round" sur un chemin de longueur zéro --&gt;
  &lt;path d="M3,3 h0" stroke="black"
        stroke-linecap="round" /&gt;


  &lt;!--
  Lignes roses pour indiquer la position
  du chemin pour chaque trait
  --&gt;
  &lt;path d="M1,1 h4" stroke="pink" stroke-width="0.025" /&gt;
  &lt;circle cx="1" cy="1" r="0.05" fill="pink" /&gt;
  &lt;circle cx="5" cy="1" r="0.05" fill="pink" /&gt;
  &lt;circle cx="3" cy="3" r="0.05" fill="pink" /&gt;
&lt;/svg&gt;
</pre>

<p>{{EmbedLiveSample('round', '100%', 200)}}</p>

<h3 id="square">square</h3>

<p>La valeur <code>square</code> indique que la fin de chaque trait sera prolongé par un rectangle d'une taille égale à la moitié de l'épaisseur du contour. Pour un chemin de longueur zéro, seul un rectangle est affiché, de la longueur de l'épaisseur du contour, et centré autour de la position du chemin.</p>

<h4 id="Exemple_3">Exemple</h4>

<div class="hidden">
<pre class="brush: css">html,body,svg { height:100% }</pre>
</div>

<pre class="brush: html">&lt;svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"&gt;

  &lt;!-- Effet de la valeur "square" --&gt;
  &lt;path d="M1,1 h4" stroke="black"
        stroke-linecap="square" /&gt;

  &lt;!-- Effet de la valeur "square" sur un chemin de longueur zéro --&gt;
  &lt;path d="M3,3 h0" stroke="black"
        stroke-linecap="square" /&gt;

  &lt;!--
  Les lignes roses indiquent la position
  du chemin pour chaque trait
  --&gt;
  &lt;path d="M1,1 h4" stroke="pink" stroke-width="0.025" /&gt;
  &lt;circle cx="1" cy="1" r="0.05" fill="pink" /&gt;
  &lt;circle cx="5" cy="1" r="0.05" fill="pink" /&gt;
  &lt;circle cx="3" cy="3" r="0.05" fill="pink" /&gt;
&lt;/svg&gt;
</pre>

<p>{{EmbedLiveSample('square', '100%', 200)}}</p>

<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2>

<p>{{Compat("svg.attributes.presentation.stroke-linecap")}}</p>

<h2 id="Spécification">Spécification</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">Statut</th>
   <th scope="col">Commentaire</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("SVG2", "painting.html#StrokeLinecapProperty", "stroke-linecap")}}</td>
   <td>{{Spec2("SVG2")}}</td>
   <td>Définition pour les formes et le texte</td>
  </tr>
  <tr>
   <td>{{SpecName("SVG1.1", "painting.html#StrokeLinecapProperty", "stroke-linecap")}}</td>
   <td>{{Spec2("SVG1.1")}}</td>
   <td>Définition initiale pour les formes et le texte</td>
  </tr>
 </tbody>
</table>