Accueil    Codes    svg - line
 



Html5 SVG - element line  Html5 SVG - element line



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



L'élément line permet de dessiner un segment. Il se base sur un point de départ et un point d'arrivée. Ses attributs sont :
    - x1 : Coordonnée sur l'axe X du début du segment
    - y1 : Coordonnée sur l'axe Y du début du segment
    - x2 : Coordonnée sur l'axe X de la fin du segment
    - y2 : Coordonnée sur l'axe Y de la fin du segment


Exemple SVG - Ligne



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

   <line x1="50" y1="100" x2="150" y2="100" stroke-width="5" stroke="green" />

   <line x1="200" y1="100" x2="300" y2="100" stroke-width="5" stroke="black" />
   <line x1="250" y1="50" x2="250" y2="150" stroke-width="5" stroke="black" />

   <line x1="350" y1="100" x2="450" y2="100" stroke-width="5" stroke="green" />
   <line x1="400" y1="50" x2="400" y2="150" stroke-width="5" stroke="red" />
   <line x1="370" y1="60" x2="430" y2="140" stroke-width="5" stroke="blue" />
   <line x1="370" y1="140" x2="430" y2="60" stroke-width="5" stroke="yellow" />
</svg>