fill-opacity
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis mars 2020.
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
Chargement…