Dessiner une ligne droite avec SVG <line>

L'élément <line> de SVG est une forme de base SVG, utilisé pour créer une ligne reliant deux points. L'élément <line> est utilisé pour dessiner des lignes à l'intérieur d'une image SVG. Il est possible de dessiner des lignes horizontales, des lignes verticales, des lignes obliques, etc.

Exemple en ligne de SVG line

Voici quelques exemples simples et courants de lignes SVG <line> pour dessiner des lignes.

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　　　　　<line　x1="0"　　y1="10"　x2="0"　　　y2="100"　style="stroke:#006600;"></line>
　　　　　　　　<line　x1="10"　y1="10"　x2="100"　y2="100"　style="stroke:#006600;"></line>
　　　　　　　　<line　x1="20"　y1="10"　x2="100"　y2="50"　　style="stroke:#006600;"></line>
　　　　　　　　<line　x1="30"　y1="10"　x2="110"　y2="10"　　style="stroke:#006600;"></line>
</svg>

Après l'exécution du code ci-dessus, l'effet de la ligne est le suivant:

Le point de départ de la ligne est déterminé par x1et y1Au point où l'attribut est défini.
Le point final de la ligne est déterminé par x2et y2Au point où l'attribut est défini.
L'attribut style définit la couleur et l'épaisseur du trait (ligne).