W3docs
fr
Se connecter

Ligne SVG

Découvrez l'élément SVG <line> : tracez une ligne droite avec x1/y1/x2/y2, stylisez-la avec stroke, ajoutez des tirets et des pointes de flèche.

Description de l'élément <line>

L'élément SVG <line> trace une ligne droite entre deux points : un point de départ (x1, y1) et un point d'arrivée (x2, y2). Utilisez-le chaque fois que vous avez besoin d'un séparateur, d'un axe, d'un connecteur ou d'un trait simple à l'intérieur d'un <svg> — c'est la manière la plus simple et la plus lisible d'exprimer « une ligne de A à B ».

Les quatre attributs de coordonnées ont par défaut la valeur 0 et acceptent soit des longueurs (en unités utilisateur, comme 30 ou 30px), soit des pourcentages relatifs au viewport (comme 50%). Ainsi, un <line> sans attributs est une ligne de longueur nulle à l'origine, qui ne s'affiche pas.

Étant donné qu'un <line> est géométriquement unidimensionnel, il n'a pas de surface intérieure. SVG remplit l'intérieur d'une forme avec la couleur fill et peint son contour avec la couleur stroke — or une ligne n'a pas d'intérieur. Pour cette raison, l'attribut fill est ignoré, et une ligne reste invisible tant qu'on ne lui attribue pas de stroke.

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>
Essayez vous-même »

Expliquons le code ci-dessus :

  • L'attribut x1 spécifie la coordonnée x de départ.
  • L'attribut y1 spécifie la coordonnée y de départ.
  • L'attribut x2 spécifie la coordonnée x d'arrivée.
  • L'attribut y2 spécifie la coordonnée y d'arrivée.

Par défaut, les lignes sont tracées avec un trait noir et une épaisseur de trait de 1 pixel. Vous pouvez personnaliser ces paramètres à l'aide des attributs stroke et stroke-width, comme illustré dans l'exemple.

Styliser les lignes : tirets, extrémités et pointes de flèche

L'apparence d'une ligne est entièrement contrôlée par les propriétés liées au trait. L'exemple ci-dessous trace trois lignes avec différents traitements :

  • stroke-dasharray transforme une ligne pleine en ligne pointillée ou tiretée. La valeur est une liste de longueurs de tirets et d'espaces (8 4 signifie un tiret de 8 unités suivi d'un espace de 4 unités, répété).
  • stroke-linecap définit la forme des extrémités de la ligne — butt (par défaut, plate), round (arrondie) ou square (carrée).
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg height="160" width="320">
      <!-- Solid line -->
      <line x1="20" y1="30" x2="300" y2="30"
            stroke="rgb(8, 112, 177)" stroke-width="4" />
      <!-- Dashed line -->
      <line x1="20" y1="80" x2="300" y2="80"
            stroke="rgb(8, 112, 177)" stroke-width="4"
            stroke-dasharray="12 6" />
      <!-- Rounded dotted line -->
      <line x1="20" y1="130" x2="300" y2="130"
            stroke="rgb(8, 112, 177)" stroke-width="8"
            stroke-linecap="round" stroke-dasharray="0.1 20" />
    </svg>
  </body>
</html>

Deux autres propriétés sont utiles avec les lignes :

  • marker-end attache un <marker> réutilisable (défini dans <defs>) à l'extrémité de la ligne — c'est la méthode standard pour ajouter une pointe de flèche.
  • vector-effect="non-scaling-stroke" maintient l'épaisseur du trait constante même lorsque le SVG est mis à l'échelle, de sorte qu'un trait fin reste fin quel que soit le niveau de zoom.

SVG <line> vs SVG <path>

Les éléments SVG <line> et <path> tracent tous deux 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.

La même ligne droite peut être exprimée des deux manières. Le <line> du premier exemple est équivalent à un <path> qui se déplace vers le point de départ (M50,30) et trace une ligne vers le point d'arrivée (L300,300) :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg height="310" width="400">
      <!-- These two draw the same line -->
      <line x1="50" y1="30" x2="300" y2="300"
            stroke="rgb(8, 112, 177)" stroke-width="3" />
      <path d="M50,30 L300,300"
            stroke="rgb(255, 159, 0)" stroke-width="3" />
    </svg>
  </body>
</html>

La version <path> est plus verbeuse pour un seul segment, ce qui est précisément la raison d'être de <line>. Si vous avez besoin de plusieurs segments droits reliés bout à bout, utilisez <polyline> plutôt que d'empiler de nombreux éléments <line>.

L'élément SVG <line> prend également en charge les Attributs globaux et les Attributs d'événement.

Pratique

Pratique
Quel ensemble d'attributs définit les deux points d'extrémité d'une ligne SVG ?
Quel ensemble d'attributs définit les deux points d'extrémité d'une ligne SVG ?
Was this page helpful?