Chemin SVG
Chemin SVG - L'élément <path>
<path>
Les commandes suivantes peuvent être utilisées pour les données de chemin :
M = moveto
L = lineto
H = ligne horizontale vers
V = ligne verticale vers
C = courbe vers
-
S = courbe lisse vers
Q = courbe de Bézier quadratique
T = courbe de Bézier quadratique lisse
A = Arc elliptique
Z = chemin proche
Remarque : Toutes les commandes ci-dessus permettent lettres minuscules. Les majuscules signifient un positionnement absolu, les minuscules signifient un positionnement relatif.
Exemple 1
L'exemple ci-dessus définit un chemin qui commence à la position 150 0, atteint la position 75 200, puis commence à partir de là jusqu'à 225 200, et se termine enfin à 150 0 chemin .
Voici le code SVG :
Instance
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <path d="M150 0 L75 200 L225 200 Z" /> </svg> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Pour les utilisateurs d'Opera : affichez le fichier SVG (cliquez avec le bouton droit sur la source d'aperçu graphique SVG).
Exemple 2
Un modèle de courbe lisse utilisant la courbe de Bézier, qui peut être mise à l'échelle indéfiniment. En règle générale, l'utilisateur sélectionne deux points de terminaison et un ou deux points de contrôle. Une courbe de Bézier avec un point de contrôle est appelée une courbe de Bézier quadratique et celle avec deux points de contrôle est appelée un cube.
L'exemple suivant crée une courbe de Bézier quadratique, A et C sont respectivement le point de départ et le point final, et B est le point de contrôle :
Le Voici le code SVG :
Instance
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="400" width="450"> <path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" /> <path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="3" fill="none" /> <path d="M 175 200 l 150 0" stroke="green" stroke-width="3" fill="none" /> <path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" /> <!-- Mark relevant points --> <g stroke="black" stroke-width="3" fill="black"> <circle id="pointA" cx="100" cy="350" r="3" /> <circle id="pointB" cx="250" cy="50" r="3" /> <circle id="pointC" cx="400" cy="350" r="3" /> </g> <!-- Label the points --> <g font-size="30" font="sans-serif" fill="black" stroke="none" text-anchor="middle"> <text x="100" y="350" dx="-30">A</text> <text x="250" y="50" dy="-10">B</text> <text x="400" y="350" dx="30">C</text> </g> </svg> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher le instance en ligne
Pour les utilisateurs d'Opera : Affichez le fichier SVG (clic droit sur la source d'aperçu graphique SVG).
C'est compliqué ? Oui! ! En raison de la complexité du dessin des chemins, il est fortement recommandé d'utiliser un éditeur SVG pour créer des graphiques complexes.
