diff options
author | julieng <julien.gattelier@gmail.com> | 2021-11-01 07:51:27 +0100 |
---|---|---|
committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-11-07 11:57:29 +0100 |
commit | 7040e4bc9c98e0c50ce903a5cbeeabeda2ed908a (patch) | |
tree | 98beab4363e778deb9e251db56c2a5b1248f2697 /files/fr/web/svg/element/use/index.html | |
parent | c5054b32e0e496608030b5148ebba6d76db8ba7f (diff) | |
download | translated-content-7040e4bc9c98e0c50ce903a5cbeeabeda2ed908a.tar.gz translated-content-7040e4bc9c98e0c50ce903a5cbeeabeda2ed908a.tar.bz2 translated-content-7040e4bc9c98e0c50ce903a5cbeeabeda2ed908a.zip |
move *.html to *.md
Diffstat (limited to 'files/fr/web/svg/element/use/index.html')
-rw-r--r-- | files/fr/web/svg/element/use/index.html | 104 |
1 files changed, 0 insertions, 104 deletions
diff --git a/files/fr/web/svg/element/use/index.html b/files/fr/web/svg/element/use/index.html deleted file mode 100644 index fc4572cb94..0000000000 --- a/files/fr/web/svg/element/use/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: <use> -slug: Web/SVG/Element/use -translation_of: Web/SVG/Element/use ---- -<div>{{SVGRef}}</div> - -<p>L'élement <strong><code><use> </code></strong>permet la duplication de <em>nodes </em>(noeuds du DOM, NDR) définis par <a href="/fr/docs/Web/SVG/Element/defs"><defs></a> afin de les insérer par ailleurs. L'effet est le même que si les noeuds étaient créés dans une partie non-rendue (au sens de non-affichée) au sein du DOM puis "clonés" là où est utilisé l'élément <code>use</code> tel que le permet les <a href="/fr/docs/Web/HTML/Element/template">éléments de gabarit</a> grâce à HTML5.<br> - <br> - Puisque les noeuds clonés par <code>use</code> ne sont pas exposés, vous devez être attentif lorsque vous utilisez des règles de style <a href="/fr/docs/Web/CSS" title="en/CSS">CSS</a> sur l'élément <code>use</code> et ses enfants "cachés". En effet les attributs CSS ne sont pas garantis d'être hérités lorsqu'ils seront clonés si vous n'explicitez pas correctement les <a href="/fr/docs/Web/CSS/inheritance" title="en/CSS/inheritance">héritages CSS</a>.</p> - -<p>Pour des raisons de sécurité, certains navigateurs peuvent appliquer la politique de <em>même-origine</em> (c'est-à-dire le couple domaine et port identiques) pour l'élément <code>use</code> ce qui peut conduire à un refus de charger une URI depuis une origine différente conernant l'attribut {{SVGAttr("href")}}.</p> - -<div class="warning"> - <p><strong>Attention :</strong> Depuis la version de SVG 2, l'attribut {{SVGAttr("xlink:href")}} est obsolète. Voir la page {{SVGAttr("xlink:href")}} pour plus d'informations.</p> -</div> - -<h2 id="Contexte_d'usage">Contexte d'usage</h2> - -<p>{{svginfo}}</p> - -<h2 id="Attributs">Attributs</h2> - -<h3 id="Attributs_globaux">Attributs globaux</h3> - -<ul> - <li><a href="/fr/docs/Web/SVG/Attribute#Conditional_processing_attributes" title="en/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li> - <li><a href="/fr/docs/Web/SVG/Attribute#Core_attributes" title="en/SVG/Attribute#Core">Core attributes</a> »</li> - <li><a href="/fr/docs/Web/SVG/Attribute#Graphical_event_attributes" title="en/SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li> - <li><a href="/fr/docs/Web/SVG/Attribute#Presentation_attributes" title="en/SVG/Attribute#Presentation">Presentation attributes</a> »</li> - <li><a href="/fr/docs/Web/SVG/Attribute#XLink_attributes" title="en/SVG/Attribute#XLink">Xlink 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> - -<ul> - <li>{{SVGAttr("x")}}</li> - <li>{{SVGAttr("y")}}</li> - <li>{{SVGAttr("width")}}</li> - <li>{{SVGAttr("height")}}</li> - <li>{{SVGAttr("href")}}</li> -</ul> - -<h2 id="Interface_DOM">Interface DOM</h2> - -<p>Cet élément est implanté par l'interface {{domxref("SVGUseElement")}}.</p> - -<h2 id="Exemple">Exemple</h2> - -<pre class="brush: html; highlight[15,17,19]"><svg width="80" height="80" xmlns="http://www.w3.org/2000/svg" - xmlns:xlink="http://www.w3.org/1999/xlink"> - <style> - .classA { - fill: red; - } - </style> - <defs> - <g id="Port"> - <circle style="fill: inherit;" r="10"/> - </g> - </defs> - - <text y="15">black</text> - <use x="50" y="10" href="#Port" /> - <text y="35">red</text> - <use x="50" y="30" href="#Port" class="classA"/> - <text y="55">blue</text> - <use x="50" y="50" href="#Port" style="fill: blue;"/> -</svg> -</pre> - -<p>{{EmbedLiveSample("Exemple", 80, 80)}}</p> - -<h2 id="Spécifications">Spécifications</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', 'struct.html#UseElement', '<use>')}}</td> - <td>{{Spec2('SVG2')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'struct.html#UseElement', '<use>')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat("svg.elements.use")}}</p> |