L'élément SVG <path> pour définir un chemin pour tracer des formes simples ou complexes

Dans les chapitres précédents nous avons vu comment dessiner des formes, c’est vrais que c’était des formes simples et que ne nous pouvons pas dessiner des courbes.
Dans le chapitre courant on va voir un moyen qui permet de tout dessiner : des rectangles, des polygones, des polyline des ellipses des cercles et surtout des courbes et des formes plus compliquées.
Sachez q’il suffit d’une seule balise <path />  .

Somaire

Tracer des formes complexes dans 1 graphique


HTML5 cours tutorial SVG

Les Chemins SVG - <path>

La balise <path> accepte les attributs de mise en formes que nous avons vu dans les chapitres précédents, c’est à dire les attributs : style, class et id.

La balise <path>  n’a qu’un attribut obligatoire/: d pour dire datas (données).

L'élément <path> est utilisé pour définir un chemin d'accès.

 L'élément <path> est utilisé pour dessiner des formes avancées combinées à partir de lignes et d’arcs, avec ou sans remplissage. C'est probablement la forme SVG la plus avancée et polyvalent de tous. C'est  aussi l'élément le plus difficile à maîtriser.

En réalité l'élément <path> définir un chemin pour tracer la forme voulue en se basant sur 10 commandes.

L’idée est la suivante : le chemin dans l’attribut d dit : 

« pose le stylo dans le point de coordonnées x,y puis trace une ligne droite ou une courbe en allons vers le point de coordonnées x1,y1 » et ainsi de suite.

Les dix commandes sont disponibles pour les données du chemin d'accès :

Commande Paramètres Nom Description

M ou m

x, y

moveto

Déplace le stylo pour spécifiées le point x, y de départ, sans dessin.

L   ou l

x, y

lineto

Trace une ligne à partir de l'emplacement actuel du stylo pour arriver au point x, y.

H ou h

x

horizontal lineto

Dessine une ligne horizontale au point défini par 
(x spécifiés, stylos courant à Y).

V  ou v

y

vertical lineto

Dessine une ligne verticale au point défini par 
(Y précisé, stylos actuelle à x).

C ou c

x1, y1 x2, y2 x, y

curveto

Dessine une courbe de Bézier cubique à partir du point de stylo courant x, y.  x1, y1 et x2, y2 sont des points de début et de fin de contrôle de la courbe.

S ou s

x2, y2 x, y

shorthand / 
smooth curveto

Dessine une courbe de Bézier cubique du point de stylo courant à x, y. x2, y2 est le point de commande d'extrémité. Le point de commande de démarrage est est supposé être le même que le point de commande d'extrémité de la courbe précédente.

T ou t


x, y

sténographie / lisse quadratique curveto Bezier

Dessine une courbe de Bézier quadratique du point de stylo courant à x, y. Le point de commande est supposée être le même que celle du dernier point de contrôle utilisé.

Q ou q

x1, y1 x, y

quadratique curveto Bezier

Dessine une courbe de Bézier quadratique à partir du point de stylo courant x, y.  x1, y1 est le point de contrôle commandant la façon des courbures des courbes.

A ou a

rx, ry 
axe des x-rotation 
à grande arche-drapeau, 
sweepflag 
x, y

elliptical arch

Dessine un arc elliptique entre le point courant au point x, y. Rx et Ry sont au rayon elliptique dans la direction x et y. 
L'x-rotation détermine la quantité de l'arc est d'être mis en rotation autour de l'axe des x. Il ne semble avoir d'effet que lorsque Rx et Ry ont des valeurs différentes. 
Le grand-arc-flag ne semble pas être utilisé (peut être 0 ou 1). Ni valeur (0 ou 1) modifie l'arc. 
L'sweep-flag détermine la direction à tirer de l'arc po

Z ou z

 

closepath

Ferme le chemin en traçant une ligne du point courant au premier point.

astuce  Remarque : Toutes les commandes ci-dessus peuvent également être exprimée avec lettres minuscules ou majuscules, la diference c’est que les minuscules interprètent les coordonnées relatives au point de stylo courant.


Exemple 1

Définir un chemin qui commence à la position 150,0 avec une ligne de position 75, 200, puis de là, une ligne à 225, 200 et enfin fermer le chemin retour à 150,0 :

Voici le code SVG :

Sélectionner le code


  <!DOCTYPE html>
 <html>
 <head>
 <title> SVG utilisation du path</title>
 </head>
 <body>
 <div>
 <svg viewBox="0 0 1200 600" xmlns="http://www.w3.org/2000/svg"
  version="1.1">
    <path d="M150 0 L75 200 L225 200 Z" stroke="blue"
  stroke-width="5" fill="none"/>
 </svg>
  </div>
 </body>
 </html>

 

Exemple 2

Les courbes de Bézier sont utilisés pour modéliser des courbes douces qui peuvent passer indéfiniment. 

Généralement, l'utilisateur sélectionne deux points de terminaison et un ou deux points de contrôle. Une courbe de Bézier avec un point control s'appelle une courbe de Bézier quadratique et le genre avec deux points de contrôle est appelé cubique.

L'exemple suivant crée une courbe de Bézier quadratique, A et C sont le début et fin , B est le point de contrôle :

Voici le code SVG :

Sélectionner le code


  <head>
 <title> SVG utilisation du path</title>
 </head>
 <body>
 <div>
 <svg viewBox="0 0 1200 600" xmlns="http://www.w3.org/2000/svg"
  version="1.1">
 <path id="lineAB" d="M 100 350 l 150 -300" stroke="red"
   stroke-width="3" fill="none" />
   <path id="lineBC" d="M 250 50 l 150 300" stroke="red"
   stroke-width="3" fill="none" />
   <path d="M 175 200 l 150 0" stroke="green" stroke-width="3"
   fill="none" />
   <path d="M 100 350 q 150 -300 300 0" stroke="blue"
   stroke-width="5" fill="none" />
   <!-- Mark relevant points -->
   <g stroke="black" stroke-width="3" fill="black">
 <circle id="pointA" cx="100" cy="350" r="3" />
 <circle id="pointB" cx="250" cy="50" r="3" />
 <circle id="pointC" cx="400" cy="350" r="3" />
   </g>
   <!-- Label the points -->
   <g font-size="30" font="sans-serif" fill="black"
  stroke="none"
   text-anchor="middle">
 <text x="100" y="350" dx="-30">A</text>
 <text x="250" y="50" dy="-10">B</text>
 <text x="400" y="350" dx="30">C</text>
   </g>
 </svg>
  </div>
 </body>
 </html>

 

C’est complexe ? OUI!!!

Et c’est en raison de cette complexité impliquée dans l'élaboration des chemins, qu’il est fortement recommandé d'utiliser un éditeur SVG pour créer des graphiques complexes. Nous vous avons proposé un dans le chapitre introduction sur SVG.

Dans ce qui suit nous allons voir différent commande.

Les commandes Moveto et Lineto

La commande moveto est donnée par la lettre « m » ça veut dire aller à.

La commande moveto est donnée au début de chaque description du chemin de tracer des formes. Aucune ligne n'est dessinée quand moveto est traitée. Il peut également être répétée plusieurs fois dans un path  lors du dessin de plusieurs lignes discontinues.

La commande LineTo quand à elle est désigné par la lettre « L ».

La commande LineTo dessine des lignes.

Une ligne droite de l'emplacement actuel peut être établie avec l'équivalent en minuscule « l ». « L » est suivie par un point, comme dans "L 100 200".

Des lignes horizontales et verticales peuvent être dessinées avec les comandes « H » et « V », suivi d'un x ou y coordonner.

La commande LineTo trace une ligne des dernières coordonnées jusqu’aux coordonnées indiqués.

Avec ces deux commandes, on peut tracer tout ce que <polyline> peut tracer.

Exemple

Sélectionner le code


  <!DOCTYPE html>
 <html>
 <head>
 <title> SVG Moveto et Lineto du path</title>
 <style>
 path{
      stroke:blue;
      stroke-width:2;
      fill:pink;
      }
 </style>
 </head>
 <body>
 <div>
 <svg viewBox="0 0 1200 600" xmlns="http://www.w3.org/2000/svg"
  version="1.1">
    <path d="M 50,20 L 80,100 L 50,180 L 140,80" />
 </svg>
  </div>
 </body>
 </html>

 

Ce n’est pas compliqué !/: ça fonctionne de la même façon que polyline, avec les L en plus.

Vous avez sans doute remarqué la manière un peu étrange du remplissage de la figure. En fait, pour la remplir,  SVG trace une ligne fictive du dernier point premier. Si on ne veut pas de remplissage, on doit mettre fill:none;. 

La commande Closepath (fermer le chemin)

Ci-dessus que path avec les commandes moveto et lineto on peut faire tout ce que  polyline peut faire, mais on ajoutant la commande closepath on va pouvoir avoir  le même résultat qu’un <polygon/>.

La commande clospath est donnée par la lettre Z .

La commande closepath a pour objet de fermer le chemin ou le tracé en traçant une ligne entre le dernier point et le tout premier point.

Pour l’exemple je vais reprendre l’exemple précédent et lui ajouter la commande closepath pour fermer le chemin comme suit :

<path d="M 50,20 L 80,100 L 50,180 L 140,80 Z"/>

Vous constatez que l’ajout de la commande closepath ferme le chemin et donne un polygone.

Tracer des Lignes horizontaux et verticaux avec vertical et horizontal lineto

Il existe en SVG deux raccourcis pour tracer des lignes verticaux et horizontaux.

Pour tracer des lignes verticaux on utilise la commande vertical lineto donnée par la lettre V et pour les lignes horizontaux on utilise la commande horizontal lineto donnée par la lettre H  comme dans l’exemple qui suit :

Sélectionner le code


  <!DOCTYPE html>
 <html>
 <head>
 <title> SVG utilisation du path</title>
 <style>
 path{
      stroke:blue;
      stroke-width:2;
      fill:pink;
      }
 </style>
 </head>
 <body>
 <div>
 <svg viewBox="0 0 1200 700" xmlns="http://www.w3.org/2000/svg"
  version="1.1">
 <path d="M 100,100 H200 V200 H100 Z"/>
 <path d="M 300,100 H350 V150 H400 V200 H450 V250 H300 Z"/>
 </svg>
  </div>
 </body>
 </html>

 

Plusieurs sous tracés

SVG permet des créer plusieurs tracés dans un seul path avec la commande M.

Dans l’exemple suivant nous reprendrons l’exemple ci-dessus mais avec un seul path

Sélectionner le code


  <!DOCTYPE html>
 <html>
 <head>
 <title> SVG utilisation du path</title>
 <style>
 path{
      stroke:blue;
      stroke-width:2;
      fill:pink;
      }      
 </style>
 </head>
 <body>
 <div>
 <svg viewBox="0 0 1200 700" xmlns="http://www.w3.org/2000/svg"
  version="1.1">
    <path d="M 100,100 H200 V200 H100 Z M 300,100 H350 V150
  H400 V200 H450 V250 H300 Z"/>
 </svg>
  </div>
 </body>
 </html>

 

On évidement faire une infinité de sous tracé avec un seul chemin de tracé, l’avantage est que nous allons pouvoir donner le même style à tous ces sous tracés.

Les coordonnées relatives

Jusqu’à présent nous avons vu dans tous les exemples précédents que les commandes avec des lettres majuscules et donc des coordonnées absolus.

Pour des coordonnées relatives on va utiliser les commandes avec des lettre minuscules comme dans l’exemple qui suit :

Exemple dessiner un escalier

Sélectionner le code


  <!DOCTYPE html>
 <html>
 <head>
 <title> SVG utilisation du path</title>
 <style>
 path{
      stroke:blue;
      stroke-width:8;
      fill:none;
      }      
 </style>
 </head>
 <body>
 <div>
 <svg viewBox="0 0 1200 700" xmlns="http://www.w3.org/2000/svg"
  version="1.1">
    <path d="m 10,10 h20 v20 h20 v20 h20 v20 h20 v20 h20 v20
  h20 v20 h20 v20 h20 v20 h20 v20 h20 v20 "/>
 </svg>
  </div>
 </body>
 </html>

 

Explication du code :

Avec m pose le stylo sur le point de coordonnées 10,10 h trace une ligne horizontal en se déplaçant de 20px v trace une ligne vertical en se déplaçant de 20px et vous connaissez la suite non ?

Avec les coordonnées absolu on aurait faire comme suit :

<path d="M 10,10 H30 V30 H50 V50 H70 V70…… "/>

ET DONC LES COORDONNEES RELATIVES C4EST PLUS SIMPLE surtout si on a des choses qui se répètent et donc un copier coller fera toute l’afaire.

astuce Astuce : Attention à la commande Moveto. En fait, c’est assez simple/: si ce m minuscule est la première commande du tracé, SVG considère que les coordonnées sont absolues. Sinon, elle considère que les coordonnées sont relatives et agit en conséquence en ajoutant les coordonnées aux dernières coordonnées.

Et voilà nous avons terminé avec cette partie.

Oui oui je sais nous n’avons pas encor tracé de courbe !

C’est ce que nous allons voir dans le chapitre suivant.

Par carabde 20 Avril 2014