Chemin SVG
Description de l'élément <path>
L'élément SVG <path> spécifie un chemin.
Les chemins sont utilisés pour créer des formes complexes combinant plusieurs lignes droites ou courbes. Les formes complexes composées uniquement de lignes droites peuvent être créées sous forme de polylignes. Les polylignes et les chemins créent des formes similaires. Cependant, les polylignes nécessitent des lignes droites plus petites pour simuler des courbes.
La création de chemins complexes à l'aide d'un éditeur XML ou d'un éditeur de texte n'est pas recommandée, car comprendre leur fonctionnement aide à repérer et corriger les problèmes d'affichage dans les SVG.
La forme d'un élément path est spécifiée par un seul paramètre : d, contenant d'autres commandes et paramètres utilisés par ces commandes. Vous trouverez la liste des commandes ci-dessous :
- M = moveto
- L = lineto
- H = lineto horizontal
- V = lineto vertical
- C = courbe
- S = courbe lisse
- Q = courbe de Bézier quadratique
- T = courbe de Bézier quadratique lisse
- A = arc elliptique
- Z = chemin fermé
Toutes ces commandes peuvent également être exécutées en minuscules. Les majuscules indiquent une forme positionnée de manière absolue, tandis que les minuscules indiquent une forme positionnée de manière relative.
Exemple de l'élément SVG <path> :
Exemple de l'élément SVG <path>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="300" height="250">
<path d="M190 40 L115 240 L265 240 Z" />
Sorry, inline SVG is not supported by your browser..
</svg>
</body>
</html>Pratique
Quels sont les attributs utilisés dans la propriété 'd' d'un chemin SVG en HTML ?