SVG <path>

SVG Chemin - <path>

<path> L'élément est utilisé pour définir un chemin.

Les commandes suivantes peuvent être utilisées pour les données de chemin :

  • M = moveto (déplacer vers)
  • L = lineto (tracer une ligne vers)
  • H = horizontal lineto (ligne horizontale vers)
  • V = vertical lineto (ligne verticale vers)
  • C = curveto (courbe vers)
  • S = smooth curveto (courbe lisse vers)
  • Q = quadratic Bézier curve (courbe de Bézier quadratique)
  • T = smooth quadratic Bézier curveto (courbe de Bézier quadratique lisse)
  • A = elliptical Arc (arc elliptique)
  • Z = closepath (fermeture du chemin)

Remarque : toutes les commandes ci-dessus peuvent également être représentées en minuscules. Les majuscules représentent une position absolue, tandis que les minuscules représentent une position relative.

Exemple 1

L'exemple suivant définit un chemin, dont la position de départ est 150,0, puis dessine une ligne jusqu'à la position 75,200, puis une ligne à partir de là jusqu'à la position 225,200, et finally ferme le chemin pour revenir à 150,0.

Ceci est le code SVG :

<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 (Bézier curves) sont utilisées pour modéliser des courbes lisses qui peuvent être étendues à l'infini. Habituellement, l'utilisateur choisit deux extrémités 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 (quadratic Bézier curve), et une courbe de Bézier avec deux points de contrôle est appelée courbe de Bézier cubique (cubic).

L'exemple suivant crée une courbe quadratique, où A et C sont les points de départ et d'arrivée, et B est le point de contrôle :

A B C

Ceci est le code SVG :

<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" />
  <!-- 标记相关的点 -->
  <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>
  <!-- 给点添加标签 -->
  <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

Très complexe ? Oui !!! En raison de la complexité du tracé des chemins, il est fortement recommandé d'utiliser un éditeur SVG pour créer des graphiques complexes.