« Découvrir le SVG/Chemins » : différence entre les versions

Comme pour les éléments <code>polyline</code> et <code>polygon</code>, les coordonnées sont exprimées en <code>px</code> et sont séparées par des espaces ou des virgules. Si plusieurs points se suivent, alors on considère qu'ils sont reliés entre eux. Ainsi, les syntaxes suivantes sont équivalentes et permettent de tracer un trait entre les points (0, 0) et ({{unité|50|px}}, {{unité|50|px}}) :

 

<path d="M 0 0 L 50 50" />

<path d="M0 0 L50 50" />

<path d="M0, 0, 50, 50" />

…

: Une instruction ne ''peut pas'' être précédée d'une virgule.

 

 

Voici un exemple complet, à comparer avec celui du chapitre précédent ''[[../Éléments graphiques#Lignes et polygones|Éléments graphiques &gt; Lignes et polygones]]'' :

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

 

</svg>

Les commandes « aller à » permettent de faire un tracé interrompu, par exemple :

<path

d="M0 0, l50 50 m0 -50, l50 50"

stroke="black" fill="none"

/>

 

Quatre commandes viennent faciliter le tracé :

* les commandes <code>V</code> et <code>v</code> ''({{lang|en|vertical lineto}})'' : suivies d'un seul nombre, elles tracent une ligne verticale du point courant au point ayant la même abscisse et l'ordonnée indiquée.

Par exemple, le code source suivant trace un carré de côté 100 et parallèle aux axes du repère :

<path

d="M0 0 h100 v100 h-100 z"

stroke="black" fill="none"

/>

 

== Arcs elliptiques ==

* les coordonnées du point d'arrivée, ''x'' et ''y''.

Par exemple,

<path

d="M0 0

stroke="black" fill="none"

/>

va relier le point (0, 0) au point (10, 10) avec un arc d'ellipse incliné de {{unité|–15|°}}, dont le rayon ''x'' vaut 20 et le rayon ''y'' vaut 13, suivant le petit arc dans le sens positif.

 

 

Avec les attributs <code>Q</code> et <code>q</code>, on définit le point d'arrivée (''x''₂, ''y''₂) et le point de contrôle intermédiaire (''x''₁, ''y''₁) : le code

<path

d="M0 0

stroke="black" fill="none"

/>

trace une courbe du point P₀(0, 0) au point P₂(10, 10) avec le point de contrôle intermédiaire P₁(5, 2). Ainsi, la tangente en P₀ suit le vecteur P₀P₁ (5, 2) et la tangente en P₂ suit le vecteur P₁P₂ (5, 8).

 

 

Pour tracer une telle courbe, on utilise les attributs <code>C</code> et <code>c</code> sous la forme

<path

d="Mx0 y0

Cx1 y1, x2 y2, x3 y3"

/>

Les attributs <code>S</code> et <code>s</code> permettent d'avoir des courbes sans angles : le premier point de contrôle P₁ est le symétrique du point de contrôle précédent par rapport au point P₀. La syntaxe est donc <code>Tx2 y2, x3 y3</code>.