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 la bordure autour des formes et du texte.

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

Les styles en ligne remplacent les attributs de présentation. Par exemple, un style en ligne comme <path style="stroke: #1c87c9;" ... /> a la priorité sur un attribut de présentation comme <path stroke="#1c87c9" ... />.

INFO

La propriété stroke peut être utilisée à la fois comme propriété CSS et comme attribut de présentation. Elle peut être appliquée à n'importe quel élément, mais ne peut avoir d'effet que sur les éléments suivants : <altGlyph>, <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref> et <tspan>.

Valeur initiale	none
S'applique à	Formes et éléments de contenu textuel.
Héritée	Oui.
Animable	Non.
Version	Spécification SVG 1.1
Syntaxe DOM	Object.stroke = "#1c87c9";

Syntaxe

Syntaxe CSS de stroke

css

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

Exemple de la propriété `stroke` :

Exemple de code CSS stroke

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Stroke property example</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="#666666" d="M5 60 l215 0" />
      </g>
    </svg>
  </body>
</html>

Try it Yourself »

Résultat

example

Exemple de la propriété `stroke` avec la balise `<svg>` :

Autre exemple de code CSS stroke

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Stroke property example</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>

Try it Yourself »

Valeurs

Valeur	Description
none	Aucune peinture n'est appliquée.
color	Définit une couleur unie. Les noms de couleurs, les codes hexadécimaux, rgb(), rgba(), hsl(), hsla() peuvent être utilisés.
url	Une référence URL vers un élément de serveur de peinture définissant un serveur de peinture.
context-fill	Utilise la valeur de fill d'un élément contextuel.
context-stroke	Utilise la valeur de stroke d'un élément contextuel.
initial	Fait utiliser à la propriété sa valeur par défaut.
inherit	Hérite la propriété de son élément parent.

Pratique

Quel est l'objectif de la propriété CSS 'stroke' et comment est-elle utilisée ?

La propriété 'stroke' est utilisée pour définir la couleur de la bordure d'une forme SVG.La propriété 'stroke' est utilisée pour définir la couleur de l'arrière-plan d'une page web.La propriété 'stroke' peut être appliquée aux éléments HTML comme un 'div' ou un 'section'.La propriété stroke accepte diverses valeurs telles que des noms de couleurs, des codes hexadécimaux, rgb, rgba, hsl, hsla et des mots-clés de couleur.'stroke' est une propriété abrégée pour stroke-width, stroke-linejoin et stroke-linecap.

Propriété CSS stroke ​

Syntaxe ​

Exemple de la propriété stroke : ​

Résultat ​

Exemple de la propriété stroke avec la balise <svg> : ​

Valeurs ​