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
BCD tables only load in the browser
Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une pull request sur https://github.com/mdn/browser-compat-data.
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
.