JavaScript offre certaines fonctions intégrées de date et d'heure, qui permettent de calculer l'âge à partir d'une date (date de naissance par exemple).
Tracer des formes complexes dans 1 graphique
HTML5 cours tutorial SVG
Les Chemins SVG - <path>
La balise <path> accepte les attributs de mise en formes que nous avons vu dans les chapitres précédents, c’est à dire les attributs : style, class
et id.
La balise <path> n’a qu’un attribut obligatoire/: d pour dire
datas (données).
L'élément <path> est utilisé pour définir un chemin d'accès.
L'élément <path> est utilisé pour dessiner des formes avancées
combinées à partir de lignes et d’arcs, avec ou sans remplissage. C'est
probablement la forme SVG la plus avancée et polyvalent de tous. C'est
aussi l'élément le plus difficile à maîtriser.
En réalité l'élément <path> définir un chemin pour tracer la
forme voulue en se basant sur 10 commandes.
L’idée est la suivante : le chemin dans l’attribut d dit :
« pose le stylo dans le point de coordonnées x,y puis trace une ligne
droite ou une courbe en allons vers le point de coordonnées x1,y1 » et
ainsi de suite.
Les dix commandes sont disponibles pour les données du chemin d'accès :
| Commande | Paramètres | Nom | Description |
|---|---|---|---|
|
M ou m |
x, y |
moveto |
Déplace le stylo pour spécifiées le point x, y de départ, sans dessin. |
|
L ou l |
x, y |
lineto |
Trace une ligne à partir de l'emplacement actuel du stylo pour arriver au point x, y. |
|
H ou h |
x |
horizontal lineto |
Dessine une ligne horizontale au point défini par |
|
V ou v |
y |
vertical lineto |
Dessine une ligne verticale au point défini par |
|
C ou c |
x1, y1 x2, y2 x, y |
curveto |
Dessine une courbe de Bézier cubique à partir du point de stylo courant x, y. x1, y1 et x2, y2 sont des points de début et de fin de contrôle de la courbe. |
|
S ou s |
x2, y2 x, y |
shorthand / |
Dessine une courbe de Bézier cubique du point de stylo courant à x, y. x2, y2 est le point de commande d'extrémité. Le point de commande de démarrage est est supposé être le même que le point de commande d'extrémité de la courbe précédente. |
|
T ou t |
|
sténographie / lisse quadratique curveto Bezier |
Dessine une courbe de Bézier quadratique du point de stylo courant à x, y. Le point de commande est supposée être le même que celle du dernier point de contrôle utilisé. |
|
Q ou q |
x1, y1 x, y |
quadratique curveto Bezier |
Dessine une courbe de Bézier quadratique à partir du point de stylo courant x, y. x1, y1 est le point de contrôle commandant la façon des courbures des courbes. |
|
A ou a |
rx, ry |
elliptical arch |
Dessine un arc elliptique entre le point courant au point x,
y. Rx et Ry sont au rayon elliptique dans la direction x et
y. |
|
Z ou z |
closepath |
Ferme le chemin en traçant une ligne du point courant au premier point. |
Remarque : Toutes les commandes ci-dessus
peuvent également être exprimée avec lettres minuscules ou majuscules,
la diference c’est que les minuscules interprètent les coordonnées
relatives au point de stylo courant.
Exemple 1
Définir un chemin qui commence à la position 150,0 avec une ligne de
position 75, 200, puis de là, une ligne à 225, 200 et enfin fermer le
chemin retour à 150,0 :
Voici le code SVG :
Exemple : Copier le code
<!DOCTYPE html> <html> <head> <title> SVG utilisation du path</title> </head> <body> <div> <svg viewBox="0 0 1200 600" xmlns="http://www.w3.org/2000/svg" version="1.1"> <path d="M150 0 L75 200 L225 200 Z" stroke="blue" stroke-width="5" fill="none"/> </svg> </div> </body> </html>
Exemple 2
Les courbes de Bézier sont utilisés pour modéliser des courbes douces
qui peuvent passer indéfiniment.
Généralement, l'utilisateur sélectionne deux points de terminaison et
un ou deux points de contrôle. Une courbe de Bézier avec un point
control s'appelle une courbe de Bézier quadratique et le genre avec
deux points de contrôle est appelé cubique.
L'exemple suivant crée une courbe de Bézier quadratique, A et C sont le
début et fin , B est le point de contrôle :
Voici le code SVG :
Exemple : Copier le code
<head> <title> SVG utilisation du path</title> </head> <body> <div> <svg viewBox="0 0 1200 600" xmlns="http://www.w3.org/2000/svg" version="1.1"> <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="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> </div> </body> </html>
C’est complexe ? OUI!!!
Et c’est en raison de cette complexité impliquée dans l'élaboration des
chemins, qu’il est fortement recommandé d'utiliser un éditeur SVG pour
créer des graphiques complexes. Nous vous avons proposé un dans le
chapitre introduction sur SVG.
Dans ce qui suit nous allons voir différent commande.
Les commandes Moveto et Lineto
La commande moveto est donnée par la lettre « m » ça veut dire aller à.
La commande moveto est donnée au début de chaque description du chemin
de tracer des formes. Aucune ligne n'est dessinée quand moveto est
traitée. Il peut également être répétée plusieurs fois dans un path
lors du dessin de plusieurs lignes discontinues.
La commande LineTo quand à elle est désigné par la lettre « L ».
La commande LineTo dessine des lignes.
Une ligne droite de l'emplacement actuel peut être établie avec
l'équivalent en minuscule « l ». « L » est suivie par un point, comme
dans "L 100 200".
Des lignes horizontales et verticales peuvent être dessinées avec les
comandes « H » et « V », suivi d'un x ou y coordonner.
La commande LineTo trace une ligne des dernières coordonnées jusqu’aux
coordonnées indiqués.
Avec ces deux commandes, on peut tracer tout ce que <polyline>
peut tracer.
Exemple
Exemple : Copier le code
<!DOCTYPE html>
<html>
<head>
<title> SVG Moveto et Lineto du path</title>
<style>
path{
stroke:blue;
stroke-width:2;
fill:pink;
}
</style>
</head>
<body>
<div>
<svg viewBox="0 0 1200 600" xmlns="http://www.w3.org/2000/svg"
version="1.1">
<path d="M 50,20 L 80,100 L 50,180 L 140,80" />
</svg>
</div>
</body>
</html>
Ce n’est pas compliqué !/: ça fonctionne de la même façon que polyline,
avec les L en plus.
Vous avez sans doute remarqué la manière un peu étrange du remplissage
de la figure. En fait, pour la remplir, SVG trace une ligne fictive du
dernier point premier. Si on ne veut pas de remplissage, on doit mettre
fill:none;.
La commande Closepath (fermer le chemin)
Ci-dessus que path avec les commandes moveto et lineto on peut faire
tout ce que polyline peut faire, mais on ajoutant la commande
closepath on va pouvoir avoir le même résultat qu’un <polygon/>.
La commande clospath est donnée par la lettre Z .
La commande closepath a pour objet de fermer le chemin ou le tracé en
traçant une ligne entre le dernier point et le tout premier point.
Pour l’exemple je vais reprendre l’exemple précédent et lui ajouter la
commande closepath pour fermer le chemin comme suit :
|
<path d="M 50,20 L 80,100 L 50,180 L 140,80 Z"/> |
Vous constatez que l’ajout de la commande closepath ferme le chemin et donne un polygone.
Tracer des Lignes horizontaux et verticaux avec vertical et horizontal lineto
Il existe en SVG deux raccourcis pour tracer des lignes verticaux et
horizontaux.
Pour tracer des lignes verticaux on utilise la commande vertical lineto
donnée par la lettre V et pour les lignes horizontaux on utilise la
commande horizontal lineto donnée par la lettre H comme dans l’exemple
qui suit :
Exemple : Copier le code
<!DOCTYPE html>
<html>
<head>
<title> SVG utilisation du path</title>
<style>
path{
stroke:blue;
stroke-width:2;
fill:pink;
}
</style>
</head>
<body>
<div>
<svg viewBox="0 0 1200 700" xmlns="http://www.w3.org/2000/svg"
version="1.1">
<path d="M 100,100 H200 V200 H100 Z"/>
<path d="M 300,100 H350 V150 H400 V200 H450 V250 H300 Z"/>
</svg>
</div>
</body>
</html>
Plusieurs sous tracés
SVG permet des créer plusieurs tracés dans un seul path avec la
commande M.
Dans l’exemple suivant nous reprendrons l’exemple ci-dessus mais avec
un seul path
Exemple : Copier le code
<!DOCTYPE html>
<html>
<head>
<title> SVG utilisation du path</title>
<style>
path{
stroke:blue;
stroke-width:2;
fill:pink;
}
</style>
</head>
<body>
<div>
<svg viewBox="0 0 1200 700" xmlns="http://www.w3.org/2000/svg"
version="1.1">
<path d="M 100,100 H200 V200 H100 Z M 300,100 H350 V150
H400 V200 H450 V250 H300 Z"/>
</svg>
</div>
</body>
</html>
On évidement faire une infinité de sous tracé avec un seul chemin de tracé, l’avantage est que nous allons pouvoir donner le même style à tous ces sous tracés.
Les coordonnées relatives
Jusqu’à présent nous avons vu dans tous les exemples précédents que les
commandes avec des lettres majuscules et donc des coordonnées absolus.
Pour des coordonnées relatives on va utiliser les commandes avec des
lettre minuscules comme dans l’exemple qui suit :
Exemple dessiner un escalier
Exemple : Copier le code
<!DOCTYPE html>
<html>
<head>
<title> SVG utilisation du path</title>
<style>
path{
stroke:blue;
stroke-width:8;
fill:none;
}
</style>
</head>
<body>
<div>
<svg viewBox="0 0 1200 700" xmlns="http://www.w3.org/2000/svg"
version="1.1">
<path d="m 10,10 h20 v20 h20 v20 h20 v20 h20 v20 h20 v20
h20 v20 h20 v20 h20 v20 h20 v20 h20 v20 "/>
</svg>
</div>
</body>
</html>
Explication du code :
Avec m pose le stylo sur le point de coordonnées 10,10 h trace une
ligne horizontal en se déplaçant de 20px v trace une ligne vertical en
se déplaçant de 20px et vous connaissez la suite non ?
Avec les coordonnées absolu on aurait faire comme suit :
<path d="M 10,10 H30 V30 H50 V50 H70 V70…… "/>
ET DONC LES COORDONNEES RELATIVES C4EST PLUS SIMPLE surtout si on a des
choses qui se répètent et donc un copier coller fera toute l’afaire.
Astuce : Attention à la commande Moveto. En
fait, c’est assez simple/: si ce m minuscule est la première commande du tracé, SVG considère que les coordonnées sont absolues. Sinon, elle
considère que les coordonnées sont relatives et agit en conséquence en ajoutant les coordonnées aux dernières coordonnées.
Et voilà nous avons terminé avec cette partie.
Oui oui je sais nous n’avons pas encor tracé de courbe !
C’est ce que nous allons voir dans le chapitre suivant.