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>

<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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Légende

Compatibilité inconnue  
Compatibilité inconnue

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.

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : a-mt, AlexisColin
Dernière mise à jour par : a-mt,