SVG

<path>

La balise <path> contient toujours l'attribut d. Cet attribut reçoit les commandes (sous la forme d'une string). Les commandes sont séparées par un espace (ou un retour à la ligne).

Les commandes débutent par une lettre : M, H, V, L, A, C, S, Q, T ou Z

Pour chaque commande avec une lettre majuscule, il existe une commande avec une lettre minuscule. Avec majuscule, est utilisé comme origine celle du système de coordonnées. Avec minuscule, est utilisé comme origine celle du point précédent. La première commande est donc souvent en majuscule.

La balise <svg> peut contenir plusieurs balises <path>

La balise <path> peut remplacer les 6 balises : rect, circle, ellipse, polygon, polyline, line.

Comme pour les autres formes, la valeur de l'attribut stroke-width est un entier positif non nul ou la valeur de l'attribut fill le code d'une couleur. Sinon, rien n'est affiché.

Les commande de base

M

La commande Mx,y (move) permet de déplacer le crayon virtuel (sans dessiner) vers un point. Exemple : d="M100,100"

H

La commande Hx dessine un trait horizontal jusqu'à l'abscisse x 

<svg style="background-color:white;width:300;height:50">
  <path d="M10,10 H100 m10,10 h150" stroke-width="3" stroke="black" />
</svg>

V

La commande Vy dessine un trait vertical jusqu'à la coordonnée y 

<svg style="background-color:white;width:300;height:110">
  <path d="M10,10 H100 V200" />
  <path d="M120,10 h90 v90" stroke-width="1" stroke="black" fill="none" />
</svg>

L

La commande Lx,y dessine un trait jusqu'au point x,y

La commande Lx,y peut remplacer les 2 commandes : Hx et Vy. 

<svg style="background-color:white;width:200;height:200">
  <path d="M159,181 L41,181 L5,69 L100,0 L195,69" />
</svg>

Z

Cette commande dessine une ligne droite entre la position actuelle et le premier point du chemin.

Même effet, si la commande est en minuscule. La couleur est celle de la forme qu'elle ferme.

Les courbes de Bézier

Une particularité remarquable des courbes de Bézier est que par le point de départ et celui d'arrivée passe une tangente; ce qui facilite le raccordement "en douceur" avec une autre courbe. Des formes complexes peuvent être rapidement calculées.

Une courbe de Bézier est défini par des points de contrôle : 2, 3, 4 ou plus.

Avec deux points, nous avons une courbe linéaire (c-à-d un segment de droite)
Avec trois points, une courbe quadratique.
Avec quatre points, une courbe cubique.

Plus le nombre de points de contrôle est élevé, plus le temps (de calcul) pour la construire est élevé. En pratique, le nombre maximal de points de contrôle est 4.

Le point de départ et celui d'arrivée sont les seuls sur la courbe.

Courbe quadratique

C'est la courbe la plus simple à construire. Le premier et dernier point de contrôle sont sur la courbe. Il n'existe donc qu'un seul point hors de la courbe.

MDN

Q

Q comme quadratique. Q x1 y1[,] x y où x1 y1 est le point hors de la courbe et x y est le point final; le point de départ étant le point final du tracé précédent.

La virgule est facultative. Elle permet une meilleure lisibilité.

Les coordonnées des points sont absolues (= depuis le coin supérieur gauche de l'image) 

<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
  <path d="M 10 80 Q 95 10 180 80" stroke="black" fill="transparent"/></path>
  <path d="M 10 90 q 85 -70, 170 0" stroke="red" fill="transparent"/></path>
</svg>

q comme quadratique. q dx1 dy1[,] dx dy où dx1 dy1, sont les écarts relatifs entre le point de départ et le point hors de la courbe et dx dy sont les écarts relatifs entre le point de départ et le point final. Le point de départ étant le point final du tracé précédent.

Les coordonnées des points sont relatives (= par rapport au dernier point tracé par la commande précédente)

T

Ce raccourci examine le précédent point de contrôle (hors de la courbe) utilisé et en génère un nouveau à partir de celui-ci. Cela signifie qu'après un premier point de contrôle, vous pouvez créer des formes assez complexes en spécifiant seulement les points d'extrémités. 

<svg width="400" height="160" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 80 Q 52.5 10, 95 80 T 380 80" stroke="black" fill="transparent"/>
  <path d="M10 90 Q 52.5 20 95 90 q 42.5 70, 285 0" stroke="blue" fill="transparent"></path>
  <path d="M10 100 Q 52.5 20, 95 100 Q 147.5 170, 380 100" stroke="red" fill="transparent"></path>
</svg>

Le point de contrôle généré vaut :

dx : l'écart horizontal entre le point de départ de la courbe précédente au point de contrôle
(ici, 52.5 - 10 = 42.5)

dy : l'écart vertical entre le point de départ de la courbe précédente au point de contrôle multiplié par -1 => inversion de la courbure
(ici, 80 - 10 = 70)

Courbe cubique

C 

C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)

C comme cubique. La courbe cubique ressemble à la courbe quadratique. Elle dispose d'un point de contrôle supplémentaire (ce qui lui permet de dessiner une boucle ou une pointe).

La virgule est également facultative. Elle permet une meilleure lisibilité.

S 

S x2 y2, x y (ou s dx2 dy2, dx dy)

Ce raccourci est plus difficile à appréhender.

A

Cette commande est la plus difficile à appréhender.

La commande A rx,ry x-axis-rotation large-arc-flag,sweep-flag x,y dessine un arc elliptique jusqu'au point x,y

  1. rx : rayon sur l'axe des x
  2. ry : rayon sur l'axe des y : si rx=ry => arc de cercle
  3. x-axis-rotation : l'angle (en degré) entre l'horizontale et la droite passant les centres de l'ellipse.
  4. large-arc-flag : 0 => arc le plus court entre les deux points
    1 => arc le plus long
  5. sweep-flag : Le point initial et le point final forment un axe (et une direction). Ce paramètre indique de quel côté de cet axe, l'arc doit être dessiné. 0 => à gauche; 1 => à droite
  6. x,y : coordonnées du point final : Ce point peut être le point initial d'un second arc. 
<svg xmlns="http://www.w3.org/2000/svg" width="310" height="310">
  <circle cx="100" cy="107.5" r="100" fill="red" />
  <circle cx="210" cy="107.5" r="100" fill="#00ff00" />
  <circle cx="155" cy="202.5" r="100" fill="#0000ff" />
  <path d="M155,191 A100,100 0 0,1 155, 24 A100,100 0 0,1 155,191"
    fill="yellow" stroke="white" stroke-width="1" />
  <path d="M200,113 A100,100 0 0,1  55,197 A100,100 0 0,1 200,113"
    fill="magenta" stroke="white" stroke-width="1" />
  <path d="M255,197 A100,100 0 0,1 110,113 A100,100 0 0,1 255,197"
    fill="aqua" stroke="white" stroke-width="1" />
  <path d="M110,113 A100,100 0 0,1 200,113 A100,100 0 0,1 155,191
    A100,100 0 0,1 110,113" fill="white" />
</svg>

x-axis-rotation 

<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
  <path d="M 10 315
           L 110 215
           A 30 50 0 0 1 162.55 162.45
           L 172.55 152.45
           A 30 50 -45 0 1 215.1 109.9
           L 315 10"
  stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
  <line x1="385" y1="320" x2="65" y2="0" stroke="red" stroke-width="1" />
</svg>

x-axis-rotation

large-arc-flag

0 => arc le plus court entre les deux points; 1 => arc le plus long 

<svg xmlns="http://www.w3.org/2000/svg" width="310" height="310">
  <path d="M155,191 A100,100 0 0,1 155,24" fill="yellow"></path>
  <path d="M200,113 A100,100 0 1,1 55,197" fill="magenta"></path>
</svg>

sweep-flag

La direction va du point initial au point final.

0 => à droite (de la direction); 1 => à gauche (de la direction)

Rappel. En informatique, l'axe des y pointe vers le bas ...
Le point initial (155,191) est plus bas que le point final (155,24). 

<svg xmlns="http://www.w3.org/2000/svg" width="310" height="200">
  <path d="M155,191 A100,100 0 0,0 155,24" fill="magenta"></path>
  <path d="M155,191 A100,100 0 0,1 155,24" fill="yellow"></path>
</svg>

Plus d'info.

Points d'intersection de deux cercles

Code Python 
# https://lucidar.me/fr/mathematics/how-to-calculate-the-intersection-points-of-two-circles
import math
print("Coordonnées du centre du Cercle 1")
x1=float(input("x1 : "))
y1=float(input("y1 : "))
r1=float(input("Rayon du Cercle 1 : "))
print("Coordonnées du centre du Cercle 2")
x2=float(input("x2 : "))
y2=float(input("y2 : "))
r2=float(input("Rayon du Cercle 2 : "))
d=math.sqrt( (x2-x1)**2 + (y2-y1)**2 )
print("Distance entre les deux centres = ",str(d))
if d>(r1+r2) : print("Pas de points d'intersections, car les cercles sont trop éloignés.")
if d<math.fabs(r2-r1) : print("Pas de points d'intersections, car un cercle est dans l'autre.")
if d==0 and r1==r2 : print("Infini de points d'intersection, car les cercles sont confondus.")
if d==(r1+r2) : print("Un seul point d'intersection. TODO = afficher les coordonnées du point.")
if d<(r1+r2) : print("Deux points d'intersection.")

print("Les deux points d'intersection, P1 et P2, se trouvent sur la droite perpendiculaire à la droite qui relient les 2 centres.")
print("La perpendulaire et la droite se coupent au point P.")
d1=(r1**2-r2**2+d**2)/2/d; d2=(r2**2-r1**2+d**2)/2/d
print("Ce point est à",str(d1),"du centre 1")
print("Ce point est à",str(d2),"du centre 2")
#print("Vérification : d1+d2=d = ",d1+d2)

print("Les 2 points d'intersection des 2 cercles sont à équidistance du point P")
x5=x1+d1/d*(x2-x1); y5=y1+d1/d*(y2-y1)
print("Coordonnées du point P : (",str(x5),",",str(y5),")")
h=math.sqrt(r1**2-d1**2)
print("Chaque point d'instersection avec les cercles sont à",str(h),"du point P.")
x3=x5+h*(y2-y1)/d; x4=x5-h*(y2-y1)/d
y3=y5+h*(x2-x1)/d; y4=y5-h*(x2-x1)/d
print("Premier point d'intersection avec les cercles, P1 : (",str(x3),",",str(y3),")")
print("Second  point d'intersection avec les cercles, P2 : (",str(x4),",",str(y4),")")

Path

Le zoom de votre navigateur doit être à 100 %.

Pour être modifiable par programme, les nombres contenus dans la valeur de l'attribut "d" doivent être séparés par un espace ou une virgule.

  

Hémicycle

avec 1/3 pour, 1/3 abstentions, 1/3 contre 

<svg width="600" height="245" style="background-color:white">
  <path d="M 50 250 A 250 250 0 0 1 175 73"
    stroke="lime" stroke-width="50" fill="none"></path>
  <path d="M 175 73 A 250 250 0 0 1 425 73"
    stroke="gray" stroke-width="50" fill="none"></path>
  <path d="M 425 73 A 250 250 0 0 1 550 250"
    stroke="red" stroke-width="50" fill="none"></path>
</svg>

M 50 250 = coordonnées du premier point sur l'arc A 250 250 = A (pour Arc) rx et ry (identiques dans le cas d'un cercle) 0 0 1 = forme de la courbe (cfr MDN) 175 73 = coordonnées du dernier point sur l'arc (liés aux cosinus et sinus de l'angle)

Dessine-moi un ... hémicycle

Divers "chemins"

Cœur : <path d="M 400,250 Q 100,50 400,500 M 400,250 Q 700,50 400,500" fill="#000000" />

Cercle : <path d="M 150,150 m 0,100 a 100,100 0 1,0 0,-200 a 100,100 0 1,0 0,200" fill="#000000" />

Cercle transparent (trou) :

Liens

Paths (sur MDN)