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>

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>

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.

Support de Navigateurs



Trouvez-vous cela utile?

Articles Associées