Trajet
On peut réaliser des trajets en SVG à l'aide de la balise path.
1
<svg width="300" height="200">
2
<path d="M10 10 H 90 V 90 H 10 L 10 10" stroke="black" fill="none"/>
3
</svg>
c'est la propriété d qui contient le chemin de traçage.
SVG - Trajet
Définition : Aller à
MoveTo : M x y
1
<svg width="300" height="200">
2
<path d="M10 10"/>
3
</svg>
On se positionne en 10,10
Définition : Ligne
LineTo : L x y
1
<svg width="300" height="200">
2
<path d="M10 10 L200 100"/>
3
</svg>
SVG - Trajet
Horizontal LineTo : H x, Vertical LineTo : V y
1
<svg width="300" height="200">
2
<path d="M50 50 H 200 V 200" stroke="black" fill="none" />
3
</svg>
SVG - Trajet
ClosePathSection : Z
1
<svg width="300" height="200">
2
<path d="M50 50 H 200 V 200 Z" stroke="black" fill="none" />
3
</svg>
SVG - Trajet
Pour les courbes suivantes voir courbe de bézier
CurveTo (Courbe cubique) : C x1 y1, x2 y2, x y (1 et 2 points de contrôle, x, y point d'arrivé)
1
<svg width="300" height="200">
2
<path d="M50 180 C 30 30, 150 30, 250 180" stroke="black" fill="none"/>
3
<circle cx="50" cy="180" r="5" fill="red" />
4
<circle cx="30" cy="30" r="5" fill="red" />
5
<circle cx="150" cy="30" r="5" fill="red" />
6
<circle cx="250" cy="180" r="5" fill="red" />
7
</svg>
SVG - Trajet
Les disques permettent de visualiser les différents points.
Quadratic Bezier CurveTo : Q x1 y1, x y (un seul point de contrôle)
1
<svg width="300" height="200">
2
<path d="M50 180 Q 100 30, 250 180" stroke="black" fill="none"/>
3
<circle cx="50" cy="180" r="5" fill="red" />
4
<circle cx="100" cy="30" r="5" fill="red" />
5
<circle cx="250" cy="180" r="5" fill="red" />
6
</svg>
SVG - Trajet