Atelier sur la balise path

Un chemin peut être complexe : enchaînement des droites diagonales ou horizontales ou verticales de courbes de Bézier (quadratique ou cubliques) et d'arcs elliptiques.
Dans ce cas la notation en relatif des coordonnées des points est fortement conseillée.
Faut-il rappeler que dans l'attribut d on ne trouve qu'une fois la commande M toujours suivie des coordonnées en absolu du point de départ.

Exercice 1 : chemin ne comprenant que des droites

Un conseil : avant de vouloir coder un chemin complexe il est préférable de réaliser un croquis sur du papier millimitré ou papier à petits carreaux.

Observez attentivement le canevas ci-dessous !
Le canevas fait 300 par 200 ; la colonne est centrée verticalement.
Le chemin démarre au point 140,20
la colonne fait 120 de large ; le disque supérieur fait 20 de hauteur et le disque inférieur fait 30 de hauteur; la partie enflée fait 220 de haut avec au milieu un disque de 20 de hauteur donc chaque partie inclinée fait 100 de haut. image svg

Reconstituez le code du fichier SVG correspondant à cette image (notation en relatif) !

Exercice 2 : chemin comprenant des courbes de Bézier cubiques

Il faut peut-être rappeler que la commande C (ou c) est suivi de trois paires de paramètres : coordonnées x et y du premier point d'inflexion, coordonnées du deuxième point aimant et coordonnées du point d'arrivée.

Observez attentivement le canevas ci-dessous !
Le canevas fait 300 par 200 ; la colonne est centrée verticalement.
Le chemin démarre au point 140,20
La colonne fait 120 de large ; le disque supérieur fait 30 de haut et le disque inférieur fait 40 de haut ; Entre les deux sur une hauteur de 200 une courbe de Bézier cubique pour donner cette double courbure.
Pour la courbe cubique de droite les coordonnées relatives (par rapport au point de départ de la courbe) des deux points d'inflexion sont :-30,60 pour le premier point et 50,140 pour le second. image SVG

Reconstituez le code du fichier SVG correspondant à cette image (notation en relatif).

Après la commande c les trois paires de coordonnées doivent être exprimées par rapport au point de départ de la courbe (ou point d'arrivée de la ligne précédente).

Récupération du code des images SVG

Les images vectorielles au format SVG ont été insérées dans la page avec la balise img.
Donc si vous souhaitez consulter le code SVG de ces fichiers il vous suffit de sélectionner l'image et de enregistrez l'image sous ... puis ouvrir le fichier récupéré (extension : .svg) avec un éditeur de textes tel NotePad.
Retour menu