stroke

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

L'attribut stroke définit la couleur (ou n'importe quelle méthode de remplissage, comme un gradient ou motif) a utiliser pour dessiner le contour d'une forme SVG.

Note : stroke étant un attribut de présentation, il peut être utilisé comme propriété CSS.

Cet attribut peut être appliqué à tout élément, en revanche il n'aura d'effet que sur les éléments suivants: <altGlyph>, <circle>, <ellipse>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref>, and <tspan>

Exemple

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
  <!-- Simple trait de couleur -->
  <circle cx="5" cy="5" r="4" fill="none" stroke="green" />

  <!-- Utiliser un degradé comme contour -->
  <defs>
    <linearGradient id="myGradient">
      <stop offset="0%" stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </linearGradient>
  </defs>
  <circle cx="15" cy="5" r="4" fill="none" stroke="url(#myGradient)" />
</svg>

Notes d'usage

Valeur	<paint>
Valeur par défaut	`none`
Animation	Oui

Spécifications

Specification
Scalable Vector Graphics (SVG) 2 # SpecifyingStrokePaint

Compatibilité des navigateurs

BCD tables only load in the browser

Note : Pour plus d'informations sur les valeurs de context-stroke (et context-fill) à partir de documents HTML, voir la documentation pour la propriété non-standard -moz-context-properties.