<line>

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 :

<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 :

<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 :

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 :