From 7040e4bc9c98e0c50ce903a5cbeeabeda2ed908a Mon Sep 17 00:00:00 2001 From: julieng Date: Mon, 1 Nov 2021 07:51:27 +0100 Subject: move *.html to *.md --- files/fr/web/svg/element/polyline/index.md | 129 +++++++++++++++++++++++++++++ 1 file changed, 129 insertions(+) create mode 100644 files/fr/web/svg/element/polyline/index.md (limited to 'files/fr/web/svg/element/polyline/index.md') diff --git a/files/fr/web/svg/element/polyline/index.md b/files/fr/web/svg/element/polyline/index.md new file mode 100644 index 0000000000..42325ffe60 --- /dev/null +++ b/files/fr/web/svg/element/polyline/index.md @@ -0,0 +1,129 @@ +--- +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

+ +

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

+ +

Voir aussi

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