Ligne SVG
Description de l'élément <line>
L'élément SVG <line> permet de tracer des lignes droites. Étant géométriquement unidimensionnels, les éléments <line> n'ont pas de surface intérieure et ne sont jamais remplis. L'attribut fill est ignoré pour cet élément.
Exemple de l'élément SVG <line> :
Exemple de l'élément SVG <line>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg height="310" width="400">
<line x1="50" y1="30" x2="300" y2="300" style="stroke:rgb(8, 112, 177);stroke-width:3" />
</svg>
</body>
</html>Expliquons le code ci-dessus :
- L'attribut
x1spécifie la coordonnée x de départ. - L'attribut
y1spécifie la coordonnée y de départ. - L'attribut
x2spécifie la coordonnée x de fin. - L'attribut
y2spécifie la coordonnée y de fin.
Par défaut, les lignes sont tracées avec un trait noir et une épaisseur de trait de 1 pixel. Vous pouvez les personnaliser à l'aide des attributs stroke et stroke-width, comme illustré dans l'exemple.
SVG <line> vs SVG <path>
Les éléments SVG <line> et <path> permettent tous deux de tracer des lignes, mais ils servent des objectifs différents. L'élément <line> est spécifiquement conçu pour les lignes droites simples et est plus sémantique et efficace pour cette tâche. L'élément <path> est utilisé pour définir des formes complexes ou plusieurs lignes et courbes connectées. Bien que <path> puisse tracer des lignes droites, il est généralement préférable d'utiliser <line> pour les segments droits de base et de réserver <path> pour des dessins plus complexes.
L'élément SVG <line> prend également en charge les Attributs globaux et les Attributs d'événement.
Pratique
Quels sont les attributs SVG requis pour créer une ligne en HTML ?