Contour SVG

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

html

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

Try it Yourself »

Exemple de la propriété stroke-linecap :

Exemple de la propriété stroke-linecap

html

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

Try it Yourself »

Exemple de la propriété stroke-width :

Exemple de la propriété stroke-width

html

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

Try it Yourself »

Exemple de la propriété stroke-dasharray :

Exemple de la propriété stroke-dasharray

html

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

Try it Yourself »

Pratique

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

La propriété stroke est utilisée pour définir la couleur d'une forme SVG.La propriété stroke-width est utilisée pour définir la largeur du contour sur une forme SVG.La propriété stroke-dasharray est utilisée pour définir ou supprimer les lignes pointillées sur une forme SVG.La propriété stroke-linecap est utilisée pour spécifier la couleur des coins sur une forme SVG.La propriété stroke-linejoin est utilisée pour spécifier la forme à utiliser aux extrémités des tracés lorsqu'ils sont contournés.La propriété stroke-opacity est utilisée pour augmenter la largeur du contour sur une forme SVG.

Contour SVG ​

Description des propriétés de contour ​

Exemple de la propriété stroke : ​

Exemple de la propriété stroke-linecap : ​

Exemple de la propriété stroke-width : ​

Exemple de la propriété stroke-dasharray : ​

Pratique ​

Contour SVG

Description des propriétés de contour

Exemple de la propriété stroke :

Exemple de la propriété stroke-linecap :

Exemple de la propriété stroke-width :

Exemple de la propriété stroke-dasharray :

Pratique