Différences entre les versions de « Découvrir le SVG/Le SVG pour l'enseignement des mathématiques et de la programmation »

Voici quelques instructions de SVG.
 
* <code>&lt;line x1="''x''<sub>1</sub>''" y1="''y''<sub>1</sub>''" x2="''x''<sub>2</sub>''" y2="''y''<sub>2</sub>''" /&gt;</code> : trace un segment de droite du point de coordonnées (''x''<sub>1</sub>'' ; ''y''<sub>1</sub>'') au point de coordonnées (''x''<sub>2</sub>'' ; ''y''<sub>2</sub>'').
* <code>&lt;rect x="''x''<sub>1</sub>''" y="''y''<sub>1</sub>''" width="''L''" height="''H''" /&gt;</code> : trace un rectangle dont le point en bas à gauche a pour coordonnées (''x''<sub>1</sub>'' ; ''y''<sub>1</sub>''), et de largeur L et de hauteur H.
* <code>&lt;circle cx="''x''<sub>1</sub>''" cy="''y''<sub>1</sub>''" r="''R''" /&gt;</code> : trace un cercle dont le centre a pour coordonnées (''x''<sub>1</sub>'' ; ''y''<sub>1</sub>''), et de rayon R.
* <code>&lt;path d="M ''x''<sub>1</sub> ''y''<sub>1</sub>, ''x''<sub>2</sub> ''y''<sub>2</sub>, ''x''<sub>3</sub> ''y''<sub>3</sub> /&gt;</code> : trace une ligne brisée entre les points de coordonnées (''x''<sub>1</sub> ; ''y''<sub>1</sub>) — (''x''<sub>2</sub> ; ''y''<sub>2</sub>) — (''x''<sub>3</sub> ; ''y''<sub>3</sub>).
* <code>&lt;path d="M ''x''<sub>1</sub> ''y''<sub>1</sub> l d''x''<sub>2</sub> d''y''<sub>2</sub>, d''x''<sub>3</sub> d''y''<sub>3</sub> /&gt;</code> : trace une ligne brisée partant du point de coordonnées (''x''<sub>1</sub> ; ''y''<sub>1</sub>) et en se déplaçant des vecteurs de composantes (d''x''<sub>2</sub> ; d''y''<sub>2</sub>) puis (d''x''<sub>3</sub> ; d''y''<sub>3</sub>). Faites attention : après « ''y''<sub>1</sub> », le « <code>l</code> » désigne la lettre L minuscule, et il ne doit pas y avoir de virgule devant.
 
Vocabulaire :
* les objets graphiques sont appelés « éléments » ; nous avons donc ici les éléments ''line'' (ligne), ''rect'' (rectangle), ''circle'' (cercle) et ''path'' (chemin) ;
* les paramètres qui caractérisent un élément sont appelés « attributs » :
** l'élément ''line'' a pour attributs ''x1'', ''y1'', ''x2'', ''y2'',
** l'élément ''rect'' a pour attributs ''x'', ''y'', ''width'' et ''height'',
** l'élément ''circle'' a pour attributs ''cx'', ''cy'' et ''r'',
** l'élément ''path'' a pour attribut ''d''.
}}
 
13 161

modifications