fill-opacity
L'attribut fill-opacity
définit l'opacité du remplissage (couleur, dégradé, motif, etc) appliqué à une forme.
Note : fill-opacity
étant un attribut de présentation, il peut être utilisé comme propriété CSS.
Cet attribut peut être appliqué sur tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: <altGlyph>
, <circle>
, <ellipse>
, <path>
, <polygon>
, <polyline>
, <rect>
, <text>
, <textPath>
, <tref>
, et <tspan>
Exemple
<svg viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg">
<!-- Opacité par défaut: 1 -->
<circle cx="50" cy="50" r="40" />
<!-- Définit l'opacité avec un nombre -->
<circle cx="150" cy="50" r="40" fill-opacity="0.7" />
<!-- Définit l'opaité avec un pourcentage -->
<circle cx="250" cy="50" r="40" fill-opacity="50%" />
<!-- Définit l'opacité avec une propriété CSS -->
<circle cx="350" cy="50" r="40" style="fill-opacity: .25;" />
</svg>
Notes d'utilisation
Valeur |
[0-1] |
<percentage>
|
---|---|
Valeur par défaut | 1 |
Animation | Oui |
Note : SVG2 introduit les valeurs en pourcentage pour fill-opacity
. Cependant, ce n'est pas souvent pris en charge pour le moment (Voir la section Compatibilité des navigateurs ci-dessous). Il est par conséquent recommandé d'utiliser les valeurs de l'intervalle [0-1]
.
Spécifications
Specification |
---|
Scalable Vector Graphics (SVG) 2 # FillOpacity |
Compatibilité des navigateurs
BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.