Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

stroke

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

This feature does not appear to be defined in any specification.

Compatibilité des navigateurs

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.