files/fr/web/svg/element/defs/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

---
title: <defs>
slug: Web/SVG/Element/defs
translation_of: Web/SVG/Element/defs
---
<div>{{SVGRef}}</div>

<p>SVG permet de définir des objets graphiques (génériques) pour une utilisation ultérieure. Autant qu'il est possible, cet usage est recommandé grâce aux propriétés offertes par l'élément <code>defs</code>.<br>
 Ainsi définir ces éléments au sein de l'élément <code>defs</code> promeut une meilleure compréhension du contenu SVG par l'homme et donc son accessibilité.<br>
 <br>
 Les éléments définis grâce à <code>defs</code> ne sont jamais directement générés (<em>au sens du rendu graphique : ils ne sont pas affichés</em>). Vous devez utiliser l'élément {{SVGElement("use")}} pour leur-s utilisation-s lorsque vous le souhaitez au sein du <code>viewport</code>.</p>

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

<p>{{svginfo}}</p>

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

<pre class="brush: xml">&lt;svg width="80px" height="30px" viewBox="0 0 80 30"
     xmlns="http://www.w3.org/2000/svg"&gt;

  &lt;defs&gt;
    &lt;linearGradient id="Gradient01"&gt;
      &lt;stop offset="20%" stop-color="#39F" /&gt;
      &lt;stop offset="90%" stop-color="#F3F" /&gt;
    &lt;/linearGradient&gt;
  &lt;/defs&gt;

  &lt;rect x="10" y="10" width="60" height="10"
        fill="url(#Gradient01)"  /&gt;
&lt;/svg&gt;
</pre>

<h2 id="Attributs">Attributs</h2>

<h3 id="Attributs_globaux">Attributs globaux</h3>

<ul>
 <li><a href="/en-US/docs/Web/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li>
 <li><a href="/en-US/docs/Web/SVG/Attribute#Core">Core attributes</a> »</li>
 <li><a href="/en-US/docs/Web/SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li>
 <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation">Presentation attributes</a> »</li>
 <li>{{SVGAttr("class")}}</li>
 <li>{{SVGAttr("style")}}</li>
 <li>{{SVGAttr("externalResourcesRequired")}}</li>
 <li>{{SVGAttr("transform")}}</li>
</ul>

<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>

<p><em>Il ne dispoe pas d'attributs spécifiques. </em></p>

<h2 id="Interface_avec_DOM">Interface avec DOM</h2>

<p>Cet élément est implémenté par l'interface <code><a href="/en-US/docs/Web/API/SVGDefsElement">SVGDefsElement</a></code>.</p>

<h2 id="Spécifications">Spécifications</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', 'struct.html#Head', '&lt;defs&gt;')}}</td>
   <td>{{Spec2('SVG2')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('SVG1.1', 'struct.html#Head', '&lt;defs&gt;')}}</td>
   <td>{{Spec2('SVG1.1')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop('1.8')}}</td>
   <td>{{CompatIE('9.0')}}</td>
   <td>{{CompatOpera('8.0')}}</td>
   <td>{{CompatSafari('3.0.4')}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatAndroid('3.0')}}</td>
   <td>{{CompatGeckoMobile('1.8')}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatSafari('3.0.4')}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>The chart is based on <a href="/en-US/docs/Web/SVG/Compatibility_sources">these sources</a>.</p>

<h2 id="En_lien_avec">En lien avec</h2>

<ul>
 <li>{{SVGElement("use")}}</li>
</ul>