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.

Somaire

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 :

Sélectionner 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

Sélectionner 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 :

Sélectionner 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 :

Sélectionner 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>

 
Par carabde 20 Avril 2014