Tracé SVG
Apprenez les propriétés de tracé SVG avec des exemples interactifs : stroke, stroke-width, stroke-linecap, stroke-linejoin, stroke-dasharray, stroke-dashoffset et bien plus.
Styliser les contours SVG avec les propriétés de tracé
Le stroke (tracé) d'un élément SVG correspond à la peinture appliquée le long du contour d'une forme, d'une ligne ou d'un texte — par opposition au fill (remplissage), qui peint l'intérieur. SVG fournit une famille de propriétés stroke-* qui contrôlent chaque aspect de ce contour : sa couleur, son épaisseur, sa transparence, la forme de ses extrémités, la façon dont ses angles se rejoignent, et s'il est continu ou en pointillés.
Ces propriétés sont des attributs de présentation, vous pouvez donc les définir directement sur un élément (stroke="purple") ou via CSS (stroke: purple;). Elles héritent également, ce qui explique pourquoi il est courant de les définir une seule fois sur un élément <g> (groupe) et de laisser les formes enfants les récupérer.
Ce chapitre couvre l'ensemble complet des propriétés de tracé. Pour les formes que vous allez tracer, consultez SVG Path, SVG Line et SVG Text. Si vous débutez en SVG, commencez par l'Introduction SVG, et gardez la Référence SVG à portée de main pour une consultation rapide de chaque attribut.
Les propriétés de tracé en un coup d'œil :
stroke— la couleur (ou autre peinture) du contour.stroke-width— l'épaisseur du contour.stroke-opacity— la transparence du tracé, de0à1.stroke-linecap— la forme dessinée aux extrémités ouvertes d'une ligne :butt,roundousquare.stroke-linejoin— la forme dessinée là où deux segments de ligne se rejoignent :miter,roundoubevel.stroke-miterlimit— jusqu'où une jonctionmiterpeut s'étendre avant de basculer vers unbevel.stroke-dasharray— le motif de tirets et d'espaces pour un contour en pointillés.stroke-dashoffset— le décalage de départ du motif de tirets le long du tracé.
La propriété stroke
La propriété stroke définit la couleur du contour. Elle accepte n'importe quelle valeur de couleur CSS — un nom de couleur, un code hexadécimal, rgb(), hsl(), ou une référence à un dégradé ou un motif. Par défaut, les formes n'ont pas de tracé (none), donc rien n'est dessiné tant que vous n'en définissez pas un.
Dans l'exemple ci-dessous, fill="none" est défini sur le groupe afin que seuls les contours soient visibles, et chaque chemin est tracé dans une couleur différente.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="100">
Sorry, your browser doesn't support inline SVG.
<g fill="none">
<path stroke="purple" d="M5 30 l215 0" />
<path stroke="lightgreen" d="M5 60 l215 0" />
<path stroke="pink" d="M5 90 l215 0" />
</g>
</svg>
</body>
</html>Le texte "Sorry, your browser doesn't support inline SVG." est un contenu de repli. Il doit être un enfant texte direct de l'élément <svg> pour qu'un navigateur sans prise en charge du SVG en ligne l'affiche à la place du graphique. Les navigateurs modernes l'ignorent et restituent le SVG.
La propriété stroke-width
La propriété stroke-width définit l'épaisseur du contour. Le tracé est dessiné centré sur le chemin, de sorte que la moitié de sa largeur se trouve de chaque côté de la ligne géométrique.
Un nombre seul est interprété en unités utilisateur (le système de coordonnées SVG) — stroke-width="5" et stroke-width="5px" sont équivalents dans un SVG ordinaire. Vous pouvez également utiliser des unités CSS explicites (px, em, pt) ou un pourcentage, qui est résolu par rapport à la diagonale du viewport SVG plutôt que par rapport à sa largeur ou sa hauteur.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="100">
<g fill="none" stroke="lightgreen">
<path stroke-width="3" d="M5 30 l215 0" />
<path stroke-width="5" d="M5 60 l215 0" />
<path stroke-width="7" d="M5 90 l215 0" />
</g>
</svg>
</body>
</html>La propriété stroke-opacity
La propriété stroke-opacity contrôle la transparence du tracé seul, indépendamment de l'opacité du remplissage. Elle prend une valeur de 0 (entièrement transparent) à 1 (entièrement opaque) ; une valeur comme 0.5 rend le tracé semi-transparent. C'est utile pour superposer des contours ou laisser transparaître l'arrière-plan à travers un contour sans affecter le remplissage de la forme.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="100">
<g fill="none" stroke="purple" stroke-width="8">
<path stroke-opacity="1" d="M5 30 l215 0" />
<path stroke-opacity="0.5" d="M5 60 l215 0" />
<path stroke-opacity="0.2" d="M5 90 l215 0" />
</g>
</svg>
</body>
</html>La propriété stroke-linecap
La propriété stroke-linecap définit la forme dessinée aux extrémités ouvertes d'un chemin tracé. Elle accepte trois valeurs :
butt(valeur par défaut) — le tracé s'arrête exactement à l'extrémité du chemin avec un bord plat et sans extension. La longueur dessinée est égale à la longueur géométrique du chemin.round— un demi-cercle dont le rayon est la moitié de la largeur du tracé est ajouté à chaque extrémité, de sorte que la ligne dépasse l'extrémité destroke-width / 2et se termine par une courbe douce.square— une extrémité plate est ajoutée qui dépasse le point final destroke-width / 2. Cela ressemble àbuttmais est plus long ; la longueur supplémentaire à chaque extrémité est la même que pourround, mais avec un bord plat au lieu d'un bord courbé.
La différence est la plus visible avec un tracé épais. Remarquez comment les lignes round et square ci-dessous paraissent légèrement plus longues que la ligne butt, même si les trois chemins partagent les mêmes coordonnées.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="100">
<g fill="none" stroke="lightblue" stroke-width="10">
<path stroke-linecap="butt" d="M5 30 l215 0" />
<path stroke-linecap="round" d="M5 60 l215 0" />
<path stroke-linecap="square" d="M5 90 l215 0" />
</g>
</svg>
</body>
</html>La propriété stroke-linejoin
La propriété stroke-linejoin définit la forme utilisée là où deux segments de ligne d'un chemin se rejoignent — les coins. Elle accepte trois valeurs courantes :
miter(valeur par défaut) — les bords extérieurs des deux segments sont prolongés jusqu'à ce qu'ils se rejoignent en un point aigu.round— le coin est arrondi par un arc.bevel— le coin est coupé avec un bord plat.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="120">
<g fill="none" stroke="orange" stroke-width="12">
<path stroke-linejoin="miter" d="M15 90 L40 20 L65 90" />
<path stroke-linejoin="round" d="M105 90 L130 20 L155 90" />
<path stroke-linejoin="bevel" d="M185 90 L210 20 L235 90" />
</g>
</svg>
</body>
</html>La propriété stroke-miterlimit
Lorsque stroke-linejoin est miter, des angles très aigus peuvent produire des pointes extrêmement longues. La propriété stroke-miterlimit limite la longueur maximale d'une telle pointe. Elle définit le rapport maximal autorisé entre la longueur de la pointe et la largeur du tracé, où la longueur de la pointe est la distance du coin intérieur jusqu'à l'extrémité extérieure de la pointe. Si le rapport d'une jonction dépasse la limite, cette jonction bascule silencieusement vers un bevel.
La valeur par défaut est 4, ce qui signifie qu'une pointe peut s'étendre jusqu'à quatre fois la largeur du tracé avant d'être coupée (cela préserve la pointe pour tout angle de coin d'environ 29° ou plus large). Plus le coin est aigu, plus la pointe est longue ; donc plus vous abaissez la limite, plus l'angle auquel les coins commencent à beveler est large. Une limite de 1 bevelise presque chaque coin qui n'est pas une ligne droite ; une limite élevée comme 10 laisse passer même les pointes très acérées. La valeur doit être au moins 1.
Dans l'exemple ci-dessous, les deux chemins forment le même pic aigu, mais celui de gauche (stroke-miterlimit="1") est forcé en bevel tandis que celui de droite (stroke-miterlimit="10") conserve sa pointe.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="120">
<g fill="none" stroke="purple" stroke-width="10" stroke-linejoin="miter">
<path stroke-miterlimit="1" d="M20 100 L45 25 L70 100" />
<path stroke-miterlimit="10" d="M120 100 L145 25 L170 100" />
</g>
</svg>
</body>
</html>La propriété stroke-dasharray
La propriété stroke-dasharray transforme un contour continu en contour en pointillés. Sa valeur est une liste de nombres séparés par des virgules ou des espaces qui décrivent les longueurs des tirets et des espaces, appliqués en ordre alterné le long du chemin :
- Une valeur unique comme
stroke-dasharray="10"produit des tirets et des espaces de longueur égale (10,10). - Deux valeurs comme
stroke-dasharray="3,5"signifient un tiret de3unités suivi d'un espace de5unités, répétés. - Avec un nombre pair de valeurs, la liste est utilisée telle quelle et se répète.
Si vous fournissez un nombre impair de valeurs, SVG répète la liste une seconde fois pour la rendre paire, de sorte que les rôles tiret/espace alternent. Par exemple, stroke-dasharray="30,15,10,10,10,15" se lit comme un motif de tiret de 30, espace de 15, tiret de 10, espace de 10, tiret de 10, espace de 15, puis se répète.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="100">
<g fill="none" stroke="orange" stroke-width="5">
<path stroke-dasharray="3,5" d="M5 30 l215 0" />
<path stroke-dasharray="12,12" d="M5 60 l215 0" />
<path stroke-dasharray="30,15,10,10,10,15" d="M5 90 l215 0" />
</g>
</svg>
</body>
</html>La propriété stroke-dashoffset
La propriété stroke-dashoffset déplace le point de départ du motif de tirets le long du chemin. Une valeur de 0 (par défaut) démarre le motif au point de départ du chemin ; une valeur positive avance le point de départ le long du chemin, tandis qu'une valeur négative le recule. C'est ce qui permet d'animer des effets de type "fourmis en marche" ou de dessin de ligne en modifiant progressivement le décalage.
Dans l'exemple ci-dessous, les trois lignes partagent le même motif de tirets mais le démarrent à des décalages différents, de sorte que les tirets apparaissent décalés les uns par rapport aux autres.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="100">
<g fill="none" stroke="lightgreen" stroke-width="5" stroke-dasharray="20,10">
<path stroke-dashoffset="0" d="M5 30 l215 0" />
<path stroke-dashoffset="10" d="M5 60 l215 0" />
<path stroke-dashoffset="20" d="M5 90 l215 0" />
</g>
</svg>
</body>
</html>Animer avec stroke-dashoffset
Parce que le décalage peut être animé, stroke-dashoffset est la base de deux effets populaires :
- Fourmis en marche — animer le décalage sur une période complète de tiret afin que les tirets semblent ramper le long du contour (comme un lasso de sélection).
- Dessin de ligne — définir
stroke-dasharraysur la longueur totale du chemin pour que le chemin entier devienne un long tiret, puis animer le décalage de cette longueur jusqu'à0pour que la ligne semble se dessiner d'elle-même.
Le CSS ci-dessous produit l'effet de fourmis en marche. L'animation passe d'un décalage de 0 à 30 (la longueur d'un cycle tiret+espace 15,15), ce qui rend la boucle fluide et sans couture :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.ants {
stroke: purple;
stroke-width: 3;
fill: none;
stroke-dasharray: 15, 15;
animation: march 1s linear infinite;
}
@keyframes march {
to {
stroke-dashoffset: 30;
}
}
</style>
</head>
<body>
<svg width="220" height="120">
<rect class="ants" x="10" y="10" width="200" height="100" />
</svg>
</body>
</html>Pour dessiner des formes entières de cette façon, consultez SVG Path et SVG Line ; la liste complète des attributs de tracé se trouve dans la Référence SVG.