d
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
L'attribut d
définit un tracé à dessiner.
La définition d'un tracé est une liste de commandes de tracé où chaque commande est composée d'une lettre pour la commande, et de nombres qui représentent les paramètres de la commande. Les commandes sont détaillées ci-dessous.
Cet attribut peut être utilisé sur les éléments SVG suivants : <path>
, <glyph>
, <missing-glyph>
.
d
est un attribut de présentation et peut donc être utilisé comme propriété CSS.
Exemple
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path
fill="none"
stroke="red"
d="M 10,30
A 20, 20 0, 0, 1 50, 30
A 20, 20 0, 0, 1 90, 30
Q 90, 60 50, 90
Q 10, 60 10, 30 z" />
</svg>
<path>
<glyph>
Attention : Depuis SVG2, <glyph>
est déprécié et ne doit plus être utilisé.
Pour un élément <glyph>
, d
est une chaîne de caractères qui contient une série de commandes de tracé qui définissent la forme du contour du glyphe.
Valeur | <string> |
---|---|
Valeur par défaut | Aucune |
Animable | Oui |
Note : Le point d'origine (situé aux coordonnées 0, 0
) correspond généralement au coin en haut à gauche du contexte. Néanmoins, pour l'élément <glyph>
, l'origine se situe dans le coin en bas à gauche de son enveloppe.
<missing-glyph>
Attention : Depuis SVG2, <missing-glyph>
est déprécié et ne doit plus être utilisé.
Pour un élément <missing-glyph>
, d
est une chaîne de caractères qui contient une série de commandes de tracé qui définissent la forme du contour du glyphe.
Valeur | <string> |
---|---|
Valeur par défaut | Aucune |
Animable | Oui |
Utilisation comme propriété CSS
d
est un attribut de présentation et peut donc être modifié à l'aide de CSS. La propriété peut prendre path()
ou none
comme valeur.
Dans l'exemple qui suit, on illustre comment appliquer un nouveau tracé au survol d'un élément. Le nouveau tracé est le même que le précédent, mais ajoute une ligne sur le cœur.
html,
body,
svg {
height: 100%;
}
/* Ce tracé est affiché au survol */
#svg_css_ex1:hover path {
d: path(
"M10,30 A20,20 0,0,1 50,30 A20,20 0,0,1 90,30 Q90,60 50,90 Q10,60 10,30 z M5,5 L90,90"
);
}
<svg id="svg_css_ex1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path
fill="none"
stroke="red"
d="M 10,30
A 20,20 0,0,1 50,30
A 20,20 0,0,1 90,30
Q 90,60 50,90
Q 10,60 10,30 z
" />
</svg>
Commandes de tracé
Les commandes de tracé sont des instructions qui définissent un tracé à dessiner. Chaque commande est composée d'une lettre de commande et de nombres qui représentent les paramètres de la commande.
SVG définit 6 types de commandes, pour un total de 20 commandes :
MoveTo
(commande de déplacement) :M
,m
LineTo
(commande pour tracer une ligne) :L
,l
,H
,h
,V
,v
- Courbe de Bézier cubique :
C
,c
,S
,s
- Courbe de Bézier quadratique :
Q
,q
,T
,t
- Courbe d'arc elliptique :
A
,a
ClosePath
(commande pour fermer le tracé):Z
,z
Note : Les commandes sont sensibles à la casse ; une commande en majuscule attend des positions absolues en arguments, alors qu'une commande en minuscule attend des points relatifs à la position actuelle du point.
Il est toujours possible de spécifier une valeur négative en argument d'une commande :
- Des angles négatifs iront dans le sens inverse des aiguilles d'une montre
- Des positions absolues négatives
x
ety
seront interprétées comme des coordonnées négatives - Pour les valeurs relatives, une valeur de
x
négative ira vers la gauche, et une valeur dey
négative ira vers le haut.
MoveTo
(déplacement)
Cette instruction peut être vue comme un déplacement du pinceau à une position donnée sans rien tracer. Autrement dit, on déplace le point courant (Po; {xo, yo}) et on ne trace pas de ligne entre Po et le nouveau point courant (Pn; {xn, yn}).
Une bonne pratique consiste à commencer tous ses chemins par une instruction MoveTo
car, sans un positionnement initial, les instructions du chemin commenceront à un point quelconque, ce qui peut donner des résultats non désirés.
Commande | Paramètres | Notes |
---|---|---|
M | (x , y )+ |
Déplace le point courant aux coordonnées Formule : Pn = { |
m | (dx , dy )+ |
Déplace le point courant en décalant la dernière position connue du tracé de Formule : Pn = {xo+ |
Exemples
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path
fill="none"
stroke="red"
d="M 10,10 h 10
m 0,10 h 10
m 0,10 h 10
M 40,20 h 10
m 0,10 h 10
m 0,10 h 10
m 0,10 h 10
M 50,50 h 10
m-20,10 h 10
m-20,10 h 10
m-20,10 h 10" />
</svg>
LineTo
(tracé d'une ligne)
Les instructions LineTo
permettent de dessiner une ligne droite à partir du point courant (Po; {xo, yo}) et jusqu'au point final (Pn; {xn, yn}), selon les paramètres indiqués. Le point final (Pn) devient alors le point courant pour la prochaine commande (Po′).
Commande | Paramètres | Notes |
---|---|---|
L | (x , y )+ |
Dessine une ligne à partir du point courant jusqu'au point final indiqué par Formule : Po′ = Pn = { |
l | (dx , dy )+ |
Dessine une ligne à partir du point courant jusqu'au point final, déterminé par le décalage horizontal Formule : Po′ = Pn = {xo + |
H | x + |
Dessine une ligne horizontale à partir du point courant et jusqu'au point final, déterminé par la coordonnée Formule : Po′ = Pn = { |
h | dx + |
Dessine une ligne horizontale à partir du point courant, jusqu'au point final dont l'abscisse est celle du point courant décalée de Formule : Po′ = Pn = {xo + |
V | y + |
Dessine une ligne verticale à partir du point courant, jusqu'au point final, dont l'ordonnée est indiquée par le paramètre Formule : Po′ = Pn = {xo, |
v | dy + |
Dessine une ligne verticale à partir du point courant, jusqu'au point final dont l'ordonnée est celle du point courant décalée de Formule : Po′ = Pn = {xo, yo + |
Exemples
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
<!-- Commandes LineTo avec coordonnées absolues -->
<path
fill="none"
stroke="red"
d="M 10,10
L 90,90
V 10
H 50" />
<!-- Commandes LineTo avec coordonnées relatives -->
<path
fill="none"
stroke="red"
d="M 110,10
l 80,80
v -80
h -40" />
</svg>
Courbes de Bézier cubiques
Les courbes de Bézier définissent des courbes douces à l'aide de quatre points :
- Le point de départ (le point courant)
-
(Po = {xo, yo})
- Le point final
-
(Pn = {xn, yn})
- Le point de contrôle initial
-
(Pcs = {xcs, ycs}) (il contrôle la courbure au début de la courbe)
- Le point de contrôle final
-
(Pce = {xce, yce}) (il contrôle la courbure vers la fin de la courbe)
Après le tracé, le point final (Pn) devient le point courant pour la prochaine commande (Po′).
Commande | Paramètres | Notes |
---|---|---|
C | (x1 ,y1 , x2 ,y2 , x ,y )+ |
Dessine une courbe de Bézier cubique à partir du point courant jusqu'au point final indiqué par
|
c | (dx1 ,dy1 , dx2 ,dy2 , dx ,dy )+ |
Dessine une courbe de Bézier cubique à partir du point courant, jusqu'au point final, déterminé par le décalage horizontal
|
S | (x2 ,y2 , x ,y )+ |
Dessine une courbe de Bézier lisse allant du point courant au point final indiqué par les coordonnées x ,y . Le point de contrôle final est indiqué par x2 ,y2 . Le point de contrôle initial est le symétrique du point de contrôle final de la précédente commande de courbe par rapport au point courant. Si la commande précédente n'était pas une courbe de Bézier cubique, le point de contrôle initial correspondra au point de départ de la courbe (c'est-à-dire le point courant). Les éventuelles paires de coordonnées qui suivent sont interprétées comme des paramètres pour des commandes de courbe de Bézier cubique lisse absolue (S ) implicites. |
s | (dx2 ,dy2 , dx ,dy )+ |
Dessine une courbe de Bézier cubique lisse allant du point courant au point final, qui est déterminé par le décalage du point courant de dx sur l'axe horizontal et de dy sur l'axe vertical. Le point de contrôle final correspond au point courant (le point de départ de la courbe) décalé de dx2 sur l'axe horizontal et décalé de dy2 le long de l'axe vertical. Le point de contrôle initial est le symétrique du point de contrôle final de la commande de courbe précédente par rapport au point courant. Si la commande précédente n'était pas une courbe de Bézier cubique, le point de contrôle initial correspondra au point de départ de la courbe (point courant). Les éventuelles paires de coordonnées qui suivent sont interprétées comme des paramètres pour des commandes de courbe de Bézier cubique lisse relative (s ) implicites. |
Exemples
<svg
viewBox="0 0 200 100"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Courbe de Bézier cubique avec des coordonnées absolues -->
<path
fill="none"
stroke="red"
d="M 10,90
C 30,90 25,10 50,10
S 70,90 90,90" />
<!-- Courbe de Bézier cubique avec des coordonnées relatives -->
<path
fill="none"
stroke="red"
d="M 110,90
c 20,0 15,-80 40,-80
s 20,80 40,80" />
<!-- Met en évidence le sommet de la courbe et les points de contrôle -->
<g id="ControlPoints">
<!-- Points de contrôles initiaux -->
<line x1="10" y1="90" x2="30" y2="90" stroke="lightgrey" />
<circle cx="30" cy="90" r="1.5" />
<line x1="50" y1="10" x2="25" y2="10" stroke="lightgrey" />
<circle cx="25" cy="10" r="1.5" />
<!-- Deuxième ensemble de points de contrôle (où le premier est implicite) -->
<line
x1="50"
y1="10"
x2="75"
y2="10"
stroke="lightgrey"
stroke-dasharray="2" />
<circle cx="75" cy="10" r="1.5" fill="lightgrey" />
<line x1="90" y1="90" x2="70" y2="90" stroke="lightgrey" />
<circle cx="70" cy="90" r="1.5" />
<!-- Sommets de la courbe -->
<circle cx="10" cy="90" r="1.5" />
<circle cx="50" cy="10" r="1.5" />
<circle cx="90" cy="90" r="1.5" />
</g>
<use href="#ControlPoints" x="100" />
</svg>
Courbe de Bézier quadratique
Les courbes de Bézier quadratiques définissent des courbes douces à l'aide de trois points :
- Le point de départ (point courant)
-
Po = {xo, yo}
- Le point final
-
Pn = {xn, yn}
- Le point de contrôle
-
Pc = {xc, yc} (qui contrôle la courbure)
Après le tracé, le point final (Pn) devient le point courant de la prochaine commande (Po′).
Commande | Paramètres | Notes |
---|---|---|
Q | (x1 ,y1 , x ,y )+ |
Dessine une courbe de Bézier quadratique à partir du point courant jusqu'au point final situé aux coordonnées
|
q | (dx1 ,dy1 , dx ,dy )+ |
Dessine une courbe de Bézier quadratique à partir du point courant jusqu'au point final, calculé en décalant le point courant de
|
T | (x ,y )+ |
Dessine une courbe de Bézier quadratique lisse à partir du point courant, jusqu'au point final situé aux coordonnées
|
t | (dx ,dy )+ |
Dessine une courbe de Bézier quadratique lisse à partir du point courant, jusqu'au point final qui correspond au décalage du point courant de
|
Exemples
<svg
viewBox="0 0 200 100"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Courbe de Bézier quadratique avec répétition implicite -->
<path
fill="none"
stroke="red"
d="M 10,50
Q 25,25 40,50
t 30,0 30,0 30,0 30,0 30,0" />
<!-- Met en évidence le sommet de la courbe et les points de contrôle -->
<g>
<polyline
points="10,50 25,25 40,50"
stroke="rgb(0 0 0 / 20%)"
fill="none" />
<circle cx="25" cy="25" r="1.5" />
<!-- Sommets de la courbe -->
<circle cx="10" cy="50" r="1.5" />
<circle cx="40" cy="50" r="1.5" />
<g id="SmoothQuadraticDown">
<polyline
points="40,50 55,75 70,50"
stroke="rgb(0 0 0 / 20%)"
stroke-dasharray="2"
fill="none" />
<circle cx="55" cy="75" r="1.5" fill="lightgrey" />
<circle cx="70" cy="50" r="1.5" />
</g>
<g id="SmoothQuadraticUp">
<polyline
points="70,50 85,25 100,50"
stroke="rgb(0 0 0 / 20%)"
stroke-dasharray="2"
fill="none" />
<circle cx="85" cy="25" r="1.5" fill="lightgrey" />
<circle cx="100" cy="50" r="1.5" />
</g>
<use href="#SmoothQuadraticDown" x="60" />
<use href="#SmoothQuadraticUp" x="60" />
<use href="#SmoothQuadraticDown" x="120" />
</g>
</svg>
Courbe d'arc elliptique
Les courbes d'arc elliptique sont des courbes définies comme une portion d'ellipse. Certaines courbes régulières sont parfois plus facilement obtenues avec des portions d'ellipses qu'avec des courbes de Bézier.
Commande | Paramètres | Notes |
---|---|---|
A | (rx ry angle large-arc-flag sweep-flag x y )+ |
Dessine un arc à partir du point courant jusqu'aux coordonnées
x ,y sont celles du nouveau point courant pour la prochaine commande. Les éventuels paramètres suivants sont considérés comme des paramètres à passer à des commandes d'arc absolu (A ) implicites.
|
a | (rx ry angle large-arc-flag sweep-flag dx dy )+ |
Dessine un arc à partir du point courant jusqu'au point dont les coordonnées sont celles du point courant décalées de
dx et dy sur les axes respectifs, on obtient le point courant de la prochaine commande. Les éventuels paramètres suivants sont considérés comme des paramètres à passer à des commandes d'arc relatif (a ) implicites.
|
Exemples
<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<!-- Les paramètres d'arc permettent de choisir celui qui est dessiné -->
<path
fill="none"
stroke="red"
d="M 6,10
A 6 4 10 1 0 14,10" />
<path
fill="none"
stroke="lime"
d="M 6,10
A 6 4 10 1 1 14,10" />
<path
fill="none"
stroke="purple"
d="M 6,10
A 6 4 10 0 1 14,10" />
<path
fill="none"
stroke="pink"
d="M 6,10
A 6 4 10 0 0 14,10" />
</svg>
ClosePath
(fermeture du tracé)
Les instructions ClosePath
permettent de dessiner une ligne droite entre la position courante et le premier point du tracé.
Commande | Paramètres | Notes |
---|---|---|
Z, z | Ferme le chemin courant en connectant le dernier point du chemin au point initial. Si les deux points sont situés à différentes coordonnées, une ligne droite est tracée entre les deux points. |
Note : L'apparence d'une forme fermée à l'aide de ClosePath
peut être différente de celle d'une forme fermée en traçant une ligne jusqu'à l'origine selon la commande, car les fins de lignes sont jointes (selon l'attribut stroke-linejoin
), plutôt que d'être placées aux mêmes coordonnées.
Exemples
<svg viewBox="0 -1 30 11" xmlns="http://www.w3.org/2000/svg">
<!--
Une forme ouverte où le dernier point
du tracé est différent du premier
-->
<path
stroke="red"
d="M 5,1
l -4,8 8,0" />
<!--
Une forme ouverte où le dernier point du
tracé correspond au premier
-->
<path
stroke="red"
d="M 15,1
l -4,8 8,0 -4,-8" />
<!--
Une forme fermée où le dernier point du
tracé est différent du premier
-->
<path
stroke="red"
d="M 25,1
l -4,8 8,0
z" />
</svg>
Spécifications
Specification |
---|
Scalable Vector Graphics (SVG) 2 # DProperty |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) # GlyphElementDAttribute |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) # DAttribute |
Compatibilité des navigateurs
BCD tables only load in the browser