Chemins avec coordonnées 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" 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 !
Il est aussi possible de mélanger dans un path les coordonnées relatives et absolues !
Pour préciser que les coordonnées d'un point sont exprimées en relatif il faut écrire les commandes en minuscule (l au lieu de L , v au lieu de V, h au lieu de H, etc. ).

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 sont toujours exprimées en absolu.

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