Arcs de cercle et arcs d'ellipse

Avec la balise path on peut réaliser des courbes de Bézier quadratiques et cubiques mais aussi des arcs d'ellipse et des arcs de cercle.
La syntaxe peut paraître compliquée à priori. Mais rassurez vous avec un peu de pratique ça devient logique donc simple.

Le code SVG correspondant (écrit directement dans la page)

<svg height = '300px' width = '300px' style ="border :1px solid black;" > <ellipse cx ="60" cy ="50" rx ="50" ry="20" fill ="none" stroke ="black" /> <path d ="M10,50 A 50 20 0 0 0 110,50" fill ="none" stroke ="red" stroke-width ="4" /> <path d ="M10,50 A 50 20 0 1 1 110,50" fill ="none" stroke ="green" stroke-width ="4" /> <circle cx ="60" cy ="150" r ="50" fill ="none" stroke ="black" /> <path d ="M10,150 A 50 50 0 0 0 110,150" fill ="none" stroke ="red" stroke-width ="4" /> <path d ="M10,150 A 50 50 0 1 1 110,150" fill ="none" stroke ="green" stroke-width ="4" /> <ellipse cx ="60" cy ="300" rx ="50" ry="20" fill ="none" stroke ="black" /> <path d ="M 10,300 a 50 20 30 0 0 100,0" fill ="none" stroke ="red" stroke-width ="4" /> <path d ="M 10,300 a 50 20 -30 1 1 100,0" fill ="none" stroke ="lime" stroke-width ="4" /> <path d ="M 10,300 a 50 20 45 0 0 100,0" fill ="none" stroke ="orange" stroke-width ="4" /> <path d ="M 10,300 a 50 20 -45 1 1 100,0" fill ="none" stroke ="green" stroke-width ="4" /> <path d ="M 10,300 a 50 20 75 0 0 100,0" fill ="none" stroke ="pink" stroke-width ="4" /> <path d ="M 10,300 a 50 20 -75 1 1 100,0" fill ="none" stroke ="olive" stroke-width ="4" / </svg>

Commentaire

Ci-dessus deux arcs elliptiques inscrits dans une ellipse puis deux arcs de cercle inscrits dans un cercle et enfin six arcs d'ellipse ayant subi une rotation.

Pour dessiner des arcs d'ellipse (de cercle) il faut employer la balise path avec la commande A (comme arc).
La lettre A est précédée des coordonnées X et Y du point de départ de l'arc.

Pour les deux premiers arcs elliptiques les paramètres sont identiques sauf les quatrième et cinquième (1 pour l'arc vert et 0 pour l'arc rouge). Donc dans le premier cas on trace dans le sens des aiguilles d'une montre et dans le deuxième cas dans le sens contraire.

Pour les deux arcs de cercle les paramètres sont identiques sauf les quatrième et cinquième (1 pour l'arc vert et 0 pour l' arc rouge). Donc dans le premier cas on trace dans le sens des aiguilles d'une montre et dans le deuxième cas dans le sens contraire.
Remarquez aussi que dans le cas d'arcs de cercle les rayons horizontaux et verticaux sont identiques.

Pour les quatre premiers arcs le troisième paramètre est 0 (pas de rotation de l'arc).
Par contre pour les six derniers arcs d'ellipse ce troisième paramètre est différent de zéro. Ce qui veut dire que l'ellipse subit une rotation par rapport à l'axe des ordonnées.
Les trois arcs "verts" (lime, green, olive) sont dessinés dans le sens des aiguilles d'une montre tandis que les trois arcs "rouges" (red, orange, pink) sont dessinés dans le sens contraire.
De plus la lettre a est minuscule. Le point d'arrivé de l'arc est exprimé en relatif (par rapport au point de départ) ; 100 à droite et même hauteur par rapport au point de départ donc : 100,0
Retour menu