SVG : courbes de Bézier quadratiques

Ci-dessous une image vectorielle au format SVG image SVG

Le code du fichier SVG inséré dans la page

<?xml version="1.0" encoding="utf-8"?> <svg width ="400" height ="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <style> path{ stroke:black; stroke-width:4px; fill:none; } </style> <circle cx = '50%' cy = '50%' r= '40' fill ='skyblue'/> <circle cx = '50%' cy = '50%' r= '6' fill ='black'/> <path d="M 100,100 Q 200,5 300,100"/> <path d="M 100,100 Q 200,195 300,100"/> </svg>

Commentaire du code

Ces deux paires de coordonnées peuvent être exprimées en relatif et dans ce cas la lettre q est en minuscule.

Comme dans tout path la commande Q est précédée de la commande M avec les coordonnées du point de départ.

Pour comprendre le fonctionnement d’une courbe quadratiques il faut imaginer un segment de métal qui, attiré par un aimant (le point d'inflexion), se courbe vers ce point aimant (sans jamais le toucher).
Dans l'exemple Les deux points d'inflexion ont la même abcsisse (200) mais des ordonnées opposées : 5 et 195.
Donc le premier segment se courbe vers le haut et la deuxième segment se courbe vers le bas.

Notez que le fichier SVG contient une feuille de style !
Retour menu