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/polyline/index.html | 179 +++++++++++++++++++++++++++ 1 file changed, 179 insertions(+) create mode 100644 files/fr/web/svg/element/polyline/index.html (limited to 'files/fr/web/svg/element/polyline') diff --git a/files/fr/web/svg/element/polyline/index.html b/files/fr/web/svg/element/polyline/index.html new file mode 100644 index 0000000000..e692ae8c7f --- /dev/null +++ b/files/fr/web/svg/element/polyline/index.html @@ -0,0 +1,179 @@ +--- +title: +slug: Web/SVG/Element/polyline +tags: + - Element + - Graphisme + - Reference + - SVG +translation_of: Web/SVG/Element/polyline +--- +
{{SVGRef}}
+ +

L'élément SVG <polyline> est une forme SVG basique qui crée des lignes entre plusieurs points. Un élément polyline est généralement utilisé pour créer des tracés ouverts car le dernier point n'est pas nécessairement connecté avec le premier. Lorsqu'on désire réaliser des formes fermées, on privilégiera l'élément {{SVGElement("polygon")}}.

+ +

Contexte d'utilisation

+ +

{{svginfo}}

+ +

Attributs

+ +

Attributs universels

+ + + +

Attributs spécifiques

+ + + +

Interface DOM

+ +

Cet élément implémente l'interface {{domxref("SVGPolylineElement")}}.

+ +

Exemples

+ +

Utilisation basique

+ +

SVG

+ +
<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
+  <polyline fill="none" stroke="black"
+      points="20,100 40,60 70,80 100,20"/>
+</svg>
+ +

Résultat

+ +

{{EmbedLiveSample("Utilisation_basique", 120, 120)}}

+ +

Escaliers

+ +

HTML

+ +
<div class="contain-demo">
+  <svg width="150" height="200">
+    <desc>
+      Première polyligne orange avec
+      remplissage blanc.
+    </desc>
+    <polyline
+        points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
+        fill="white" stroke="#D07735" stroke-width="6" />
+  </svg>
+  <svg width="150" height="200">
+    <desc>
+      Seconde polyligne orange avec
+      remplissage jaune.
+    </desc>
+    <polyline
+        points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
+        fill="#F9F38C" stroke="#D07735" stroke-width="6" />
+  </svg>
+</div>
+
+ +

CSS

+ +
.contain-demo {
+  margin: 25px auto;
+  text-align: center;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Escaliers", 400, 500)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('SVG2', 'shapes.html#PolylineElement', '<polyline>')}}{{Spec2('SVG2')}} 
{{SpecName('SVG1.1', 'shapes.html#PolylineElement', '<polyline>')}}{{Spec2('SVG1.1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeEdgeFirefox (Gecko)IEOperaSafari
Support simple{{CompatChrome("1.0")}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.8")}}{{CompatIE("9.0")}}{{CompatOpera("8.0")}}{{CompatSafari("3.0.4")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Support simple{{CompatAndroid("3.0")}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.8")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatSafari("3.0.4")}}
+
+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf