logo oujood
🔍

Comment dessiner une ligne en SVG

SVG permet de tracer des lignes en utilisant l'élément <line> ou l'élément <polyline> , dans cet article nous allons voir par des exmples comment.

OUJOOD.COM

chapitre précédent

sommaire

chapitre suivant


HTML5 cours tutorial SVG

SVG tracer une ligne avec la balise - <line>

L'élément <line> est utilisé pour créer une ligne :
Voici le code SVG :

Exemple :     📋 Copier le code 


  <!DOCTYPE html>
 <html>
 <head>
 <title> Dessiner un rectangle avec SVG</title>
 </head>
 <body>
 <div>
 <svg viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg"
  version="1.1">
   <line x1="0" y1="0" x2="450" y2="70"
  style="stroke:rgb(255,0,0);stroke-width:2"/>
 </svg>
  </div>
 </body>
 </html>

Explication du code :
L’attribut x1 définit le début de la ligne sur l'axe des abscisses(axe des x)
L'attribut y1 définit le début de la ligne sur l'axe (axe des y)
L’attribut x2 définit la fin de la ligne sur l'axe des abscisses
L'attribut y2 définit la fin de la ligne sur l'axe des ordonnées
Exemple 2

Exemple :     📋 Copier le code 


  <!DOCTYPE html>
 <html>
 <head>
 <title> Dessiner un rectangle avec SVG</title>
 </head>
 <body>
 <div>
 <svg viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg"
  version="1.1">
   <g stroke="red" >
 <line x1="100" y1="300" x2="200" y2="100"
         stroke-width="1"  />
 <line x1="300" y1="300" x2="300" y2="100"
         stroke-width="5"  />
 <line x1="500" y1="300" x2="400" y2="100"
         stroke-width="9"  />
 <line x1="700" y1="300" x2="500" y2="100"
         stroke-width="13"  />
 <line x1="900" y1="300" x2="600" y2="100"
         stroke-width="17"  />
   </g>
 </svg>
  </div>
 </body>
 </html>

SVG polyligne - <polyline>

L'élément <polyline> est utilisé pour créer toutes les formes qui se compose uniquement de lignes droites :
Voici le code SVG :

Exemple :     📋 Copier le code 


  <!DOCTYPE html>
 <html>
 <head>
 <title> Dessiner un rectangle avec SVG</title>
 </head>
 <body>
 <div>
 <svg viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg"
  version="1.1">
  <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
   style="fill:none;stroke:black;stroke-width:3" />
 </svg>
  </div>
 </body>
 </html>

Explication du code
La liste des nombre est constituée de plusieurs paires séparées par un espace, les deux nombres constituant la paire sont séparées par une virgule.
Dans l’exemple :la paire 20,20 sont les coordonnés du début du premier segment et 40,25 est sa fin et est en même temps le début du second segment ainsi de suite jusqu’à la paire finale qui sera la fin du dernier segment.

Exemple 2
Un autre exemple avec uniquement des lignes droites :
Voici le code SVG :

Exemple :     📋 Copier le code 


  <!DOCTYPE html>
 <html>
 <head>
 <title> Dessiner un rectangle avec SVG</title>
 </head>
 <body>
 <div>
 <svg viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg"
  version="1.1">
 <polyline points="0,40 40,0 80,40 120,0 160,40 200,0 240,40
  0,40"
   style="fill:white;stroke:red;stroke-width:4"/>
 </svg>
  </div>
 </body>
 </html>

chapitre précédent

sommaire

chapitre suivant

Par carabde 20 Avril 2014