Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez également 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> (en-US), <tref> (en-US), and <tspan>

<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

Spécification Statut Commentaire
Scalable Vector Graphics (SVG) 2
La définition de 'stroke' dans cette spécification.		 Candidat au statut de recommandation Définition pour les formes et le texte.
Ajoute context-fill et context-stroke.
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
La définition de 'stroke' dans cette spécification.		 Recommendation Définiton initiale pour les formes et le texte

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.