From 88dda3c00eefc18a29447e99ebd3177925602b52 Mon Sep 17 00:00:00 2001 From: julieng Date: Mon, 1 Nov 2021 07:51:45 +0100 Subject: convert content to md --- files/fr/web/svg/element/use/index.md | 142 ++++++++++++++-------------------- 1 file changed, 60 insertions(+), 82 deletions(-) (limited to 'files/fr/web/svg/element/use') diff --git a/files/fr/web/svg/element/use/index.md b/files/fr/web/svg/element/use/index.md index fc4572cb94..a1a0a1c747 100644 --- a/files/fr/web/svg/element/use/index.md +++ b/files/fr/web/svg/element/use/index.md @@ -3,102 +3,80 @@ title: slug: Web/SVG/Element/use translation_of: Web/SVG/Element/use --- -
{{SVGRef}}
+{{SVGRef}} -

L'élement <use> permet la duplication de nodes (noeuds du DOM, NDR) définis par <defs> 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 use tel que le permet les éléments de gabarit grâce à HTML5.
-
- Puisque les noeuds clonés par use ne sont pas exposés, vous devez être attentif lorsque vous utilisez des règles de style CSS sur l'élément use 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 héritages CSS.

+L'élement **` `**permet la duplication de _nodes_ (noeuds du DOM, NDR) définis par [\](/fr/docs/Web/SVG/Element/defs) 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 `use` tel que le permet les [éléments de gabarit](/fr/docs/Web/HTML/Element/template) grâce à HTML5. -

Pour des raisons de sécurité, certains navigateurs peuvent appliquer la politique de même-origine (c'est-à-dire le couple domaine et port identiques) pour l'élément use ce qui peut conduire à un refus de charger une URI depuis une origine différente conernant l'attribut {{SVGAttr("href")}}.

+Puisque les noeuds clonés par `use` ne sont pas exposés, vous devez être attentif lorsque vous utilisez des règles de style [CSS](/fr/docs/Web/CSS "en/CSS") sur l'élément `use` 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 [héritages CSS](/fr/docs/Web/CSS/inheritance "en/CSS/inheritance"). -
-

Attention : Depuis la version de SVG 2, l'attribut {{SVGAttr("xlink:href")}} est obsolète. Voir la page {{SVGAttr("xlink:href")}} pour plus d'informations.

-
+Pour des raisons de sécurité, certains navigateurs peuvent appliquer la politique de _même-origine_ (c'est-à-dire le couple domaine et port identiques) pour l'élément `use` ce qui peut conduire à un refus de charger une URI depuis une origine différente conernant l'attribut {{SVGAttr("href")}}. -

Contexte d'usage

+> **Attention :** Depuis la version de SVG 2, l'attribut {{SVGAttr("xlink:href")}} est obsolète. Voir la page {{SVGAttr("xlink:href")}} pour plus d'informations. -

{{svginfo}}

+## Contexte d'usage -

Attributs

+{{svginfo}} -

Attributs globaux

+## Attributs - +### Attributs globaux -

Attributs spécifiques

+- [Conditional processing attributes](/fr/docs/Web/SVG/Attribute#Conditional_processing_attributes "en/SVG/Attribute#ConditionalProccessing") » +- [Core attributes](/fr/docs/Web/SVG/Attribute#Core_attributes "en/SVG/Attribute#Core") » +- [Graphical event attributes](/fr/docs/Web/SVG/Attribute#Graphical_event_attributes "en/SVG/Attribute#GraphicalEvent") » +- [Presentation attributes](/fr/docs/Web/SVG/Attribute#Presentation_attributes "en/SVG/Attribute#Presentation") » +- [Xlink attributes](/fr/docs/Web/SVG/Attribute#XLink_attributes "en/SVG/Attribute#XLink") » +- {{SVGAttr("class")}} +- {{SVGAttr("style")}} +- {{SVGAttr("externalResourcesRequired")}} +- {{SVGAttr("transform")}} -
    -
  • {{SVGAttr("x")}}
    • -
  • {{SVGAttr("y")}}
    • -
  • {{SVGAttr("width")}}
    • -
  • {{SVGAttr("height")}}
    • -
  • {{SVGAttr("href")}}
    • -
+### Attributs spécifiques -

Interface DOM

+- {{SVGAttr("x")}} +- {{SVGAttr("y")}} +- {{SVGAttr("width")}} +- {{SVGAttr("height")}} +- {{SVGAttr("href")}} -

Cet élément est implanté par l'interface {{domxref("SVGUseElement")}}.

+## Interface DOM -

Exemple

+Cet élément est implanté par l'interface {{domxref("SVGUseElement")}}. -
<svg width="80" height="80" xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink">
-  <style>
+## Exemple
+
+```html
+
+
- -

{{EmbedLiveSample("Exemple", 80, 80)}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('SVG2', 'struct.html#UseElement', '<use>')}}{{Spec2('SVG2')}} 
{{SpecName('SVG1.1', 'struct.html#UseElement', '<use>')}}{{Spec2('SVG1.1')}}Initial definition
- -

Compatibilité des navigateurs

- -

{{Compat("svg.elements.use")}}

+ + + + + + + + black + + red + + blue + + +``` + +{{EmbedLiveSample("Exemple", 80, 80)}} + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------ | ------------------------ | ------------------ | +| {{SpecName('SVG2', 'struct.html#UseElement', '<use>')}} | {{Spec2('SVG2')}} |   | +| {{SpecName('SVG1.1', 'struct.html#UseElement', '<use>')}} | {{Spec2('SVG1.1')}} | Initial definition | + +## Compatibilité des navigateurs + +{{Compat("svg.elements.use")}} -- cgit v1.2.3-54-g00ecf