<line>

Permet de créer une ligne droite entre deux points sur une page HTML.

La balise <line> est un élément SVG utilisé pour dessiner une ligne droite entre deux points.

Elle est idéale pour créer des graphiques, des bordures ou des schémas avec des lignes simples.

Structure et syntaxe de la balise `<line>`

Structure

Elle s'utilise toujours avec la balise HTML <svg>.

Voici un exemple basique :

HTML

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <line x1="10" y1="10" x2="190" y2="190" stroke="blue" stroke-width="2" />
</svg>

Dans cet exemple :

x1 et y1 définissent le point de départ de la ligne ;
x2 et y2 définissent le point d'arrivée de la ligne ;
stroke définit la couleur de la ligne ;
stroke-width définit l'épaisseur de la ligne.

Essayez par vous-même :

Exemple avancé

Voici un exemple où plusieurs lignes sont utilisées pour former un motif :

HTML

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
    <line x1="50" y1="50" x2="250" y2="50" stroke="red" stroke-width="4" stroke-linecap="round" />
    <line x1="50" y1="100" x2="250" y2="100" stroke="green" stroke-width="4" stroke-dasharray="10 5" />
    <line x1="50" y1="150" x2="250" y2="150" stroke="blue" stroke-width="4" stroke-linecap="square" />
</svg>

Dans cet exemple :

La première ligne a des extrémités arrondies grâce à l’attribut stroke-linecap="round".
La deuxième ligne est une ligne en pointillés avec l’attribut stroke-dasharray="10 5".
La troisième ligne utilise des extrémités carrées grâce à stroke-linecap="square".

Voici notre résultat :

Attributs de la balise `<line>`

La balise <line> accepte plusieurs attributs :

Attribut	Description
`x1`, `y1`	Coordonnées du point de départ de la ligne.
`x2`, `y2`	Coordonnées du point d’arrivée de la ligne.
`stroke`	Couleur de la ligne.
`stroke-width`	Épaisseur de la ligne.
`stroke-linecap`	Définit la forme des extrémités de la ligne (`butt`, `round`, ou `square`).
`stroke-dasharray`	Crée des lignes pointillées ou en tirets. Par exemple, `5 5` pour des tirets de 5 unités séparés par des espaces de 5 unités.

Bonnes pratiques

Utilisez des lignes pour des séparateurs ou pour construire des graphiques plus complexes.
Combinez différents styles avec les attributs stroke, stroke-width, et stroke-dasharray pour varier les effets visuels.
Faites attention aux proportions et à l’espacement pour un design harmonieux.

Compatibilité des navigateurs

La balise <line> est largement prise en charge :

Navigateur	Compatibilité
Chrome	Oui
Firefox	Oui
Safari	Oui
Edge	Oui
Internet Explorer	Oui (IE 9+)