La balise path de SVG

Nous allons maintenant introduire la balise path (chemin).

Grâce à cette balise on peur réaliser des formes complexes : courbes de Bézier, arcs elliptiques,etc.

Mais la balise path peut aussi remplacer avantageusement les balises line, polygon, polyline

Exemple de forme produite par la balise path

Sachez simplement pour le moment que ce "chemin" est une succession de segments et de courbes quadratiques.

Exemple plus simple

Mais commençons par un exemple simple pour présenter cette balise.
Dessinons des segments et des triangles avec cette balise La balise path path non fermé : pas de commande Z path fermé : commande Z à la fin Ligne produite avec la balise path

Le code correspondant

<svg width="400px" height="400px"> <title>La balise path </title> <desc>path non fermé : pas de commande Z</desc> <path d="M 40,40 L 150,100 L 100,280" fill ="none" stroke ="green"/> <desc>path fermé : commande Z à la fin </desc> <path d="M 240,40 L 350,100 L 300,280 Z" fill ="none" stroke = 'red' stroke-linejoin = 'round' stroke-width ="10" stroke-dasharray = "5 5"/> <desc>Ligne produite avec la balise path</desc> <path d="M 50,300 L350,300" stroke = 'navy' stroke-linecap = 'round' stroke-width ="10" /> </svg>

Nous avons trois formes : deux triangles et une ligne
Le premier triangle est ouvert (manque un segment) et le deuxième est fermé;

Un chemin peut comprendre plusieurs commandes L mais toujours une seule commande M.
Vous pouvez notez que l'attribut stroke-linecap peut être utilisé avec la balise path pour dessiner un segment unique.
L'attribut stroke-linejoin peut être utilisé avec un chemin dessinant des angles (au moins deux segments).

Chemin avec des verticales et horizontales

SVG - balise path - Tracer des lignes horizontales et verticales avec les commandes H et V path fermé composé de droites horizontales et verticales path ouvert composé de droites horizontales et verticales

Le code SVG correspondant

<svg width="400" height="400"> <title>SVG - balise path - Tracer des lignes horizontales et verticales avec les commandes H et V</title> <desc>path fermé composé de droites horizontales et verticales</desc> <path d= "M 100,100 H 200 V 200 H 100 Z" fill ="none" stroke ="red" /> <desc>path ouvert composé de droites horizontales et verticales</desc> <path d= "M 200,250 H 300 V 350 H 200" fill ="none" stroke ="blue"/> </svg>

Lorsque un chemin consiste en une succession de segments horizontaux ou verticaux utilisez les commandes H et V à la place de L.
Il y a en effet la commande H (comme Horizontal) et la commande V (comme Vertical) qui remplacent avantageusement la commande L (comme Lineto).
Les commandes H et V doivent être suivies d’un seul nombre : l'abscisse (pour la commande H) ou l'ordonnée (pour la commande V) du point d’arrivée du segment.

Dans la page suivante je vous montre que l'on peut noter un chemin en relatif. C'est très très pratique !
Retour menu