Accueil    Codes    svg - polyline
 



Html5 SVG - element polyline  Html5 SVG - element polyline



Création d'éléments SVG de type polyline



L'élément polyline permet de dessiner une forme (ouverte) à partir d'une suite de segments liés. Il se base sur une liste de coordonnées désignant tous les points par lesquels il passera.
    - points : Liste de points sous la forme Xi,Yi

Il est possible de définir autant de points que l'on souhaite, cependant il faut veiller à bien respecter la syntaxe, chaque système de point étant séparé du suivant par un espace (points="X1,Y1 X2,Y2 ... Xn,Yn")


Exemple SVG - Polyline



<svg width="600" height="200" viewBox="0 0 600 200" zoomAndPan="disable"
   xmlns="http://www.w3.org/2000/svg">
   <desc>Exemple SVG - Ligne</desc>

   <polyline fill="none" stroke="gray" stroke-width="4"
      points="20,20 250,20 250,180 50,180 50,50 220,50 220,150 80,150 80,80 190,80 190,120 120,120" />

   <polyline fill="none" stroke="gray" stroke-width="4"
      points="350,180 380,180 380,140 410,140 410,180 440,180 440,100 470,100 470,180 500,180 500,60 530,60 530,180" />
</svg>