Nous utilsons la balise svg (Scalable Vector Graphics) qui est un format de dessin vectoriel.
Définissons d'abord le cadre en largeur et en hauteur.
Ici height 200 et width 600
Puis plaçons les points par rapport à ce cadre.
Puis la ligne, sa couleur et son épaisseur qui relie les points entre eux
la balise "svg" est utilisée pour réaliser des dessins simples.
CODE
<svg height="200" viewBox="0 0 600 200" width="600" xmlns="http://www.w3.org/2000/svg" zoomAndPan="disable"> <desc>Exemple SVG - Ligne</desc> <polyline fill="none" points="
10,180
380,80
390,160
410,150
410,180
440,180
440,100
470,100
470,180
500,180
500,60
530,60
530,180"
stroke="blue" stroke-width="6"></polyline> </svg>
RESULTAT
On peut, bien entendu, croiser les lignes en inversant ou en modifiant les valeurs.
Haut de page