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> (en-US), <tref> (en-US), and <tspan>

Exemple

<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) 1.1 (Second Edition)
# 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.