SVG <chemin>
Chemin SVG - <chemin>
L'élément <path> est utilisé pour définir un chemin.
Les commandes suivantes sont disponibles pour les données de chemin :
- M = passer à
- L = ligne à
- H = ligne horizontale
- V = ligne verticale
- C = courbe à
- S = courbe lisse
- Q = courbe de Bézier quadratique
- T = courbe de Bézier quadratique lisseto
- A = Arc elliptique
- Z = chemin proche
Remarque : Toutes les commandes ci-dessus peuvent également être exprimées avec des lettres minuscules. Les lettres majuscules signifient absolument positionnées, les minuscules signifient relativement positionnées.
Exemple 1
L'exemple ci-dessous définit un chemin qui commence à la position 150,0 avec une ligne jusqu'à la position 75 200 puis à partir de là, une ligne jusqu'à 225 200 et enfin referme le chemin jusqu'à 150,0 :
Voici le code SVG :
Exemple
<svg height="210" width="400">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
Exemple 2
Les courbes de Bézier sont utilisées pour modéliser des courbes lisses qui peuvent être mises à l'échelle indéfiniment. Généralement, l'utilisateur sélectionne deux points finaux et un ou deux points de contrôle. Une courbe de Bézier avec un point de contrôle est appelée courbe de Bézier quadratique et celle avec deux points de contrôle est appelée cubique.
L'exemple suivant crée une courbe de Bézier quadratique, où A et C sont les points de départ et d'arrivée, B est le point de contrôle :
Voici le code SVG :
Exemple
<svg 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-family="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>
Complexe? OUI!!!! En raison de la complexité impliquée dans le dessin des chemins, il est fortement recommandé d'utiliser un éditeur SVG pour créer des graphiques complexes.