SVG Path - <path>
Le <path> élément est utilisé pour définir un chemin.
Les commandes suivantes sont disponibles pour les données de chemin:
- M = moveto
- L = lineto
- H = lineto horizontal
- V = lineto vertical
- C = curveto
- S = curveto lisse
- Q = courbe de Bézier quadratique
- T = lisse quadratique curveto Bézier
- A = arc elliptique
- Z = closepath
Note: Toutes les commandes ci - dessus peut également être exprimé avec des lettres majuscules. Les lettres majuscules signifie absolument positionnés, minuscules moyens relativement positionnés.
Exemple 1
L'exemple ci-dessous définit un chemin qui commence à la position 150,0 avec une ligne à la position 75200, puis à partir de là, une ligne à 225.200 et, enfin, la fermeture du chemin de retour à 150,0:
Voici le code SVG:
Exemple
<svg height="210" width="400">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
Essayez - le vous - même » exemple 2
Les courbes de Bézier sont utilisés pour modéliser des courbes lisses qui peuvent être mis à l'échelle indéfiniment. En règle générale, l'utilisateur sélectionne deux points d'extrémité et un ou deux points de contrôle. Une courbe de Bézier avec un seul point de contrôle est appelé une courbe de Bézier quadratique et le genre avec deux points de contrôle est appelé cube.
L'exemple suivant crée une courbe de Bézier quadratique, où A et C sont les points de début et de fin, 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>
Essayez - le vous - même » Complexe? OUI!!!! En raison de la complexité des trajectoires de dessin, il est fortement recommandé d'utiliser un éditeur SVG pour créer des graphiques complexes.