From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/svg/element/use/index.html | 182 ++++++++++++++++++++++++++++++++ 1 file changed, 182 insertions(+) create mode 100644 files/fr/web/svg/element/use/index.html (limited to 'files/fr/web/svg/element/use') diff --git a/files/fr/web/svg/element/use/index.html b/files/fr/web/svg/element/use/index.html new file mode 100644 index 0000000000..c8e179ea8a --- /dev/null +++ b/files/fr/web/svg/element/use/index.html @@ -0,0 +1,182 @@ +--- +title: +slug: Web/SVG/Element/use +translation_of: Web/SVG/Element/use +--- +
{{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.

+ +

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")}}.

+ +
+

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

+
+ +

Contexte d'usage

+ +

{{svginfo}}

+ +

Attributs

+ +

Attributs globaux

+ + + +

Attributs spécifiques

+ + + +

Interface DOM

+ +

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

+ +

Exemple

+ +
<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>
+
+ +

{{EmbedLiveSample("Example", 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é avec les navigateurs

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Load from external URI{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Load from data: URI{{CompatUnknown}}{{CompatGeckoDesktop("10.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Load from external URI{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Load from data: URI{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
-- cgit v1.2.3-54-g00ecf