SVG : chemin exprimé en relatif

Exemple

SVG - balise path - notation en relatif des coordonnées du chemin dessiner un escalier : notation en relatif dessiner un zigzag : notation en relatif

La feuille de style

	.style1 {stroke : olive ; stroke-width:4px;  fill:none; }
	.style2 {fill : olive ; fill-opacity : 0.5;  }

On définit deux classes que l'on va appliquer aux chemins SVG.

Le code SVG de l'exemple

<svg width="400px" height="300px" > <title>SVG - balise path - notation en relatif des coordonnées du chemin </title> <desc>dessiner un escalier : notation en relatif </desc> <path d="M 10,10 h 20 v 20 h 20 v 20 h 20 v 20 h 20 v 20 h 20 v 20 h 20 v 20 h 20 v 20 h 20 v 20 h 20 v 20 h 20 v 20 z" class ="style1" /> <desc>dessiner un zigzag : notation en relatif </desc> <path d="M 10,280 l 20,-20 l 20,20 l 20,-20 l 20,20 l 20,-20 l 20,20 l 20,-20 l 20,20 l 20,-20 l 20,20 l 20,-20 l 20,20 l 20,-20" class ="style1" /> </svg>

Chaque balise path a deux attributs : d et class !
Dans l'attribut d les commandes h,v, l sont écrites en minuscules !

Dans le premier path on une alternance : h 20 v 20
Dans le deuxième path on a une alternance : l 20, -20 l 20,20
Le premier chemin est fermé (commande z) ; ce qui n'est pas le cas du deuxième chemin (absence de commande z).

Définir dans un path les coordonnées x et y en absolu de chaque point (c'est à dire par rapport à l'arête supérieure gauche de la zone de dessin) est une opération délicate et qui exige de réaliser au préalable un croquis sur papier à petits carreaux.
Mais, bonne nouvelle, il est possible d'exprimer les coordonnées d'un point de façon relative c'est à dire d'exprimer ses coordonnées par rapport au précédent point. Ce qui, vous en conviendrez, beaucoup plus simple pour l'esprit humain.
Il est aussi possible de mélanger dans un path les coordonnées relatives et absolues mais je vous le déconseille.
Pour préciser que les coordonnées d'un point sont exprimées en relatif il faut écrire les commandes en minuscule (l,h,v).

Attention les coordonnées x et y du point de départ du chemin c'est à dire les coordonnées qui suivent la commande M doivent toujours être exprimées en absolu.

La virgule séparant l'abscisse de l'ordonnée est facultative. Donc vous pouvez parfaitement écrire les chemins de la façon suivante (exemple) : "M 10 280 l 20 -20 l 20 20 l 20 -20 ... "

Exercice

Essayez de reconstituer le code de SVG correspondant à ce deuxième canevas (qui fait 200 par 200) ; utilisez la notation en relatif. Mise en forme avec la classe style2; le sommet de l'étoile a pour coordonnées : 100,20.
Retour menu