Courbes de Bézier quadratiques avec SVG

Ci-dessous une image vectorielle au format SVG image SVG

Le code du fichier SVG incorporé 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

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 la première ligne se courbe vers le haut et la deuxième se courbe vers le bas.

Fichier SVG et CSS

Notez que le fichier SVG contient une feuille de style interne.

Dans un fichier SVG la feuille de style CSS doit être l'intérieur du conteneur STYLE (comme dans un fichier HTM !).
Une règle de style en ligne (attribut style) est aussi possible (comme dans un fichier HTM !).
Vous pouvez aussi mettre en forme un objet SVG en appelant une classe (définie dans la feuille de style) via l'attribut class.
Retour menu