Propriété CSS stroke

La propriété stroke peint le long du contour de l'élément graphique donné.

Les propriétés fill et stroke spécifient la peinture utilisée pour rendre l'intérieur et le trait autour des formes et du texte.

Vous pouvez trouver les couleurs web dans la section Couleurs HTML.

Valeur initiale	none
Appliquée à	Les formes et les éléments de contexte de texte.
Héritée	Oui.
Animable	Non.
Version	SVG 1.1 Specification
Syntaxe DOM	Object.stroke = "#1c87c9";

Syntaxe

stroke: color | url | none | context-fill | context-stroke | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <h2>Exemple de la propriété stroke</h2>
    <svg height="100" width="500">
      <g fill="none">
        <path stroke="#8ebf42" d="M5 20 l215 0" />
        <path stroke="#1c87c9" d="M5 40 l215 0" />
        <path stroke="#666" d="M5 60 l215 0" />
      </g>
    </svg>
  </body>
</html>

Essayez-vous-même!

Un autre exemple avec la propriété stroke:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <h2>Exemple de la propriété stroke</h2>
    <svg viewBox="5 5 100 100">
      <style>
        path {
        fill: none;
        stroke-width: 3px;
        marker: url(#diamond);
        }
      </style>
      <path d="M 10,50 v -20 h 40 v -20" stroke="#666"/>
      <path d="M 30,70 v -20 h 40 v -20" stroke="#8ebf42"/>
      <path d="M 50,90 v -20 h 40 v -20" stroke="#1c87c9"/>
      <marker id="diamond" markerWidth="12" markerHeight="12" refX="6" refY="6"
        markerUnits="userSpaceOnUse">
        <circle cx="6" cy="6" r="3"
          fill="#000" stroke="#ccc" stroke-width="1,5"/>
      </marker>
    </svg>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
none	Aucune peinture appliquée.
color	Définit une couleur solide. Les noms des couleurs, les codes hexadecimaux des couleurs, rgb(), rgba(), hsl(), hsla() peuvent être utilisés.
url	Une référence d'URL à un élément de serveur de peinture définissant un serveur de peinture.
context-fill	Utilise la valeur de la propriété stroke de l'élément de contexte.
context-stroke	Utilise la valeur de la propriété span class="property">fill de l'élément de contexte.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.