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