files/fr/web/svg/attribute/stroke-dasharray/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

---
title: stroke-dasharray
slug: Web/SVG/Attribute/stroke-dasharray
tags:
  - Attribut SVG
  - SVG
translation_of: Web/SVG/Attribute/stroke-dasharray
---
<p>L'attribut <code>stroke-dasharray</code> contrôle le motif et l'espacement entre les segments utilisés pour tracer le contour d'un élément via l'attribut stroke. L'attribut définit ainsi un motif constitué d'une suite de segments et de vides dont la forme se rapprochera d'une ligne de pointillés. </p>

<p class="note"><strong>Note:</strong> Comme il s'agit d'un attribut de présentation, <code>stroke-dasharray </code>peut aussi être utilisé directement dans une feuille de style CSS.</p>

<p>Les éléments suivants peuvent utiliser l'attribut <code>stroke-dasharray</code>: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}</p>

<h2 id="Exemple">Exemple</h2>

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

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

    &lt;line                                  x1="0" y1="1" x2="30" y2="1" stroke="black" /&gt;
    &lt;line stroke-dasharray="4"             x1="0" y1="3" x2="30" y2="3" stroke="black" /&gt;
    &lt;line stroke-dasharray="4, 1"          x1="0" y1="5" x2="30" y2="5" stroke="black" /&gt;
    &lt;line stroke-dasharray="4, 1, 2"       x1="0" y1="7" x2="30" y2="7" stroke="black" /&gt;
    &lt;line stroke-dasharray="4, 1, 2, 3"    x1="0" y1="9" x2="30" y2="9" stroke="black" /&gt;
&lt;/svg&gt;
</pre>

<p>{{ EmbedLiveSample('Exemple', '220', '150', '', 'Web/SVG/Attribute/stroke-dasharray') }}</p>

<h2 id="Contexte_d'usage">Contexte d'usage</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">Catégories</th>
   <td>Attribut de présentation</td>
  </tr>
  <tr>
   <th scope="row">Valeur</th>
   <td><strong title="this is the default value">none</strong> | &lt;dasharray&gt; | inherit</td>
  </tr>
  <tr>
   <th scope="row">Animable</th>
   <td>Oui</td>
  </tr>
  <tr>
   <th scope="row">Document normatif</th>
   <td><a class="external" href="http://www.w3.org/TR/SVG/painting.html#StrokeDasharrayProperty">SVG 1.1 (2nd Edition)</a></td>
  </tr>
 </tbody>
</table>

<dl>
 <dt>&lt;dasharray&gt;</dt>
 <dd>Il s'agit d'une liste de mesures <span><a href="/en/SVG/Content_type#Length" title="en/SVG/Content_type#Length">&lt;length&gt;</a> et</span> <a href="/en/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage">&lt;percentage&gt;</a> séparées par des virgules ou des espaces blancs. Ils permettent de spécifier la longeur de l'alternance entre segments et vides. Si un nombre impair de valeurs est entré, alors la liste sera répartie afin de créer un nombre pair de valeurs par répétition. Ainsi, <strong>5,3,2</strong> sera rendu comme <strong>5,3,2,5,3,2</strong>.</dd>
</dl>

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

<p>{{Compat("svg.attributes.presentation.stroke-dasharray")}}</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#StrokeDasharrayProperty", "stroke-dasharray")}}</td>
   <td>{{Spec2("SVG2")}}</td>
   <td>Définition pour les formes et textes</td>
  </tr>
  <tr>
   <td>{{SpecName("SVG1.1", "painting.html#StrokeDasharrayProperty", "stroke-dasharray")}}</td>
   <td>{{Spec2("SVG1.1")}}</td>
   <td>Définition initiale pour les formes et textes</td>
  </tr>
 </tbody>
</table>