W3docs
fr
Se connecter

Contour SVG

SVG offers different stroke properties that can be applied to any kind of text, lines and outlines of elements. See some of the stroke properties in use.

Description des propriétés de contour

SVG propose différentes propriétés de contour qui peuvent être appliquées à tout type de texte, de lignes et de contours d'éléments. Elles permettent de contrôler divers aspects d'un contour. Voici quelques propriétés de contour :

  • stroke pour spécifier la couleur d'une ligne, d'un contour ou d'un texte d'un élément,
  • stroke-linecap pour spécifier comment les extrémités d'une ligne SVG sont rendues,
  • stroke-width pour spécifier l'épaisseur d'une ligne, d'un contour ou d'un texte d'un élément,
  • stroke-dasharray pour spécifier des lignes pointillées.

Exemple de la propriété stroke :

Exemple de la propriété stroke

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="100" >
      <g fill="none">
        <path stroke="purple" d="M5 30 l215 0" />
        <path stroke="lightgreen" d="M5 60 l215 0" />
        <path stroke="pink" d="M5 90 l215 0" />
      </g>
      Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>
Essayez vous-même »

Exemple de la propriété stroke-linecap :

Exemple de la propriété stroke-linecap

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="100">
      <g fill="none" stroke="lightblue" stroke-width="10">
        <path stroke-linecap="butt" d="M5 30 l215 0" />
        <path stroke-linecap="round" d="M5 60 l215 0" />
        <path stroke-linecap="square" d="M5 90 l215 0" />
      </g>
    </svg>
  </body>
</html>
Essayez vous-même »

Exemple de la propriété stroke-width :

Exemple de la propriété stroke-width

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="100">
      <g fill="none" stroke="lightgreen">
        <path stroke-width="3" d="M5 30 l215 0" />
        <path stroke-width="5" d="M5 60 l215 0" />
        <path stroke-width="7" d="M5 90 l215 0" />
      </g>
    </svg>
  </body>
</html>
Essayez vous-même »

Exemple de la propriété stroke-dasharray :

Exemple de la propriété stroke-dasharray

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="100">
      <g fill="none" stroke="orange" stroke-width="5">
        <path stroke-dasharray="3,5" d="M5 30 l215 0" />
        <path stroke-dasharray="12,12" d="M5 60 l215 0" />
        <path stroke-dasharray="30,15,10,10,10,15" d="M5 90 l215 0" />
      </g>
    </svg>
  </body>
</html>
Essayez vous-même »

Pratique

Pratique

Laquelle ou lesquelles des affirmations suivantes est/sont vraies concernant le contour SVG en HTML ?