Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

« SVG Attribute reference home

Cet attribut définit un chemin à suivre.

Contexte d'utilisation

Categories Attribut de description de chemin
Valeur <Liste de mouvements>
Animable Oui
Document normatif SVG 1.1 (2nd Edition)

L'attribut d est une chaîne de caractères qui contient une liste de "mouvements". Ces derniers sont une combinaisons des instructions suivantes :

  • Aller à (Moveto)
  • Tracer une ligne jusqu'à (Lineto)
  • Tracer une courbe jusqu'à(Curveto)
  • Tracer un arc de cercle jusqu'à (Arcto)
  • Fermer le chemin (ClosePath)

Ces instructions sont combinées en une seule chaîne de caractères sensible à la casse. Une commande en majuscule définit un mouvement absolu et une commande en minuscule, un mouvement relatif à la position actuelle du curseur. Les valeurs négatives sont toujours autorisées. Les angles négatifs correspondent au sens trigonométrique (inverse des aiguilles d'une montre). Des valeurs négatives pour un mouvement absolu correspondent à des coordonnées négatives. Enfin, pour un mouvement relatif, un x négatif correspond à un déplacement à gauche et un y négatif à un déplacement en haut..

Moveto (aller à)

Cette instuction peut être vue comme un déplacement du pinceau à une position donnée sans rien tracer. Une bonne pratique consiste à commencer tous ses chemins par une instruction Moveto car, sans un positionnement initial, les instructions du chemin commencerons à un point quelconque ce qui peut donner des résultats non désirés.

Syntaxe:

  • M x,y où x et y sont des coordonnées absolues, respectivement horizontale et verticale.
  • m dx,dy où dx et dy sont des distances relatives à la position courante, respectivement vers la droite et vers le bas.

Exemples :

  • Positionnement absolu en x = 50, y = 100 : <path d="M50,100..." />
  • Déplacement de 50 vers la droite et 100 vers le bas : <path d="m50,100..." />

Lineto (tracer une ligne jusqu'à)

A l'opposé de l'instruction Moveto, Lineto trace réellement une ligne de la position courante à la position définie. La syntaxe générique est "L x,y" ou "l dx, dy" avec x, y des coordonnées absolues et dx, dy des distances relatives au point courant, relativement à droite et en bas.

Il existe aussi des raccourcis pour définir des lignes horizontales (H) ou verticales (V). Leur syntaxe est similaire à celle de L, mais il n'y a qu'une valeur à donner.

Exemples :

  • Dessiner un carré (avec coordonnées relatives) : <path d="M-10,-10 h50 v50 h-50 v-50"/>
  • Dessiner un carré (avec coordonnées absolues) : <path d="M-10,-10 H40 V40 H-10 V-10"/>

Curveto

L'instruction Curveto trace une courbe de Bézier. Il existe deux types de courbes de Bézier : cubique et quadratique. Les courbes cubiques sont un cas particulier des courbes quadratiques puisque le point de contrôle est commun au point de départ et au point d'arrivé. La syntaxe d'une courbe quadratique de Bézier est "Q cx,cy x,y" ou "q dcx,dcy dx,dy". cx et cy sont les coordonnées absolues du point de contrôle tandis que dcx et dcy sont les coordonnées du point de contrôle relatives au point courant. x et y sont les coordonnées absolues du point d'arrivée tandis que dx et dy sont les coordonnées relatives de ce point par rapport au point courant.

Les courbes cubiques de Bézier suivent le même principe mais avec deux points de contrôle. La syntaxe de ces courbes est "C c1x,c1y c2x,c2y x,y" ou "c dc1x,dc1y dc2x,dc2y dx,dy".

 

For chains of smooth Bezier curves, the T and S commands are available. Their syntax is simpler than the other Curveto commands because it is assumed that the first control point is the reflection about the previous point from the previous control point, or that it actually IS the previous point if there was no previous control point. The syntax for T is "T x,y" or "t dx,dy" for absolute and relative directions, respectively, and is used to create Quadratic Bezier curves. S is used to create Cubic Bezier curves, with the syntax "S cx,cy x,y" or "s dcx,dcy dx,dy", where (d)cx indicates the second control point.

Finally, all of the Bezier curve commands can be made into a "polybezier" by specifying all of the parameters multiple times after the initial command. Consequently, the following two commands will create exactly the same path:

<path d="c 50,0 50,100 100,100 50,0 50,-100 100,-100" />
<path d="c 50,0 50,100 100,100 c 50,0 50,-100 100,-100" />

Arcto

Parfois il est plus simple de définir un path comme une courbe elliptique plutôt que comme une courbe de Bézier. Dans cette optique, les commandes Arcto sont supportées par les balises path.

La définition d'un Arcto est relativement complexe : A rx,ry xAxisRotate LargeArcFlag,SweepFlag x,y, où rx et ry représentent les rayons dans les directions x et y, respectivement ; LargeArcFlag est une valeur à 0 ou 1, et permet de déterminer si le plus petit (0) ou le plus grand (1) arc possible doit être dessiné ; SweepFlag est une valeur à 0 ou 1 et définit le sens de balayage de la courbe : horaire (1) ou anti-horaire (0) ; et enfin x et y sont les coordonnées de destination.

La propriété xAxisRotate est censée changer l'axe des x relativement au viewport de référence. Cependant, il semble que cette propriété n'ait aucun effet avec le moteur de rendu Gecko 7.

ClosePath (fermer un chemin)

L'instruction ClosePath trace simplement une ligne droite de la position actuelle jusqu'au point initial de la courbe. C'est l'instruction la plus simple puisqu'elle n'attend aucun argument. Il n'y a pas de différence entre la version majuscule ("Z") et la version minuscule ("z").

Eléments

Les éléments suivants peuvent utiliser l'attribut d :

In additon, the same rules here apply to <animate> animation paths.

Notes

Le point origin (de coordonnées 0,0) est habituellement le coin supérieur gauche du contexte. Cependant, l'élément <glyph> a son origine dans le coin inférieur gauche de la boîte contenant son caractère.

Étiquettes et contributeurs liés au document

Contributeurs à cette page : AntoineTohan, mknx, Tolokoban2
Dernière mise à jour par : AntoineTohan,