Fill-opacity et stroke-opacity - Propriétés CSS

fill-opacity
stroke-opacity

Résumé des caractéristiques de la propriété fill-opacity

Description rapide
Définit l'opcaité (la transparence) du remplissage d'une forme en SVG.
Statut
Standard
Utilisable sur
SVG
Pourcentages
Calculé par rapport à 1 (opacité complète).
Valeur initiale
1
Héritée par défaut
Oui.
Type d'animation
[number]
Module W3C
Module CSS - Traits et remplissages
Références (W3C)
 🡇  
 🡅  
Statut du document: WD (document de travail)
Statut du document: CR (document candidat à la recommandation)
Statut du document: REC (recommandation)

Schémas syntaxiques de fill-opacity et stroke-opacity.

fill-opacity - Syntax DiagramSyntax diagram of the fill-opacity CSS property. See stylescss.free.fr for details. number number % %fill-opacity:;fill-opacity:;
Schéma syntaxique de la propriété
fill-opacity
stroke-opacity - Syntax DiagramSyntax diagram of the stroke-opacity CSS property. See stylescss.free.fr for details. number number % %stroke-opacity:;stroke-opacity:;
Schéma syntaxique de la propriété
stroke-opacity

Description des termes utilisés sur les schémas :

  • number est un nombre sans unité, positif ou nul.
  • % est un pourcentage, 100% correspondant à une opacité totale.

Description des propriétés fill-opacity et stroke-opacity.

La propriété fill-opacity définit l'opacité (ou la transparence) du remplissage d'une forme en SVG.
La propriété équivalente stroke-opacity définit l'opacité du trait de bordure.

La transparence de la bordure fait apparaître une subtilité : le remplissage s'étend jusqu'au milieu de la bordure. Ce qui est invisible avec une bordure opaque car la bordure est dessinée par dessus le remplissage (1). Le deuxième exemple ci-dessous le montre clairement : l'opacité de la bordure a été réduite à 20%, la couleur de remplissage est perceptible à travers la bordure jusqu'au milieu de cette dernière.

stroke-opacity:1;
stroke-opacity:0.2;

(1) Remarque. La propriété paint-order permet de définir si c'est la bordure qui est dessinée au dessus du remplissage, ou le contraire.

Syntaxes pour fill-opacity et stroke-opacity.

  • fill-opacity: 0.25; fill-opacity: 25%;

    Une valeur de 1 ou de 100% correspond à une opacité totale (pas de transparence) et, à l'inverse, une valeur de 0 ou de 0% correspond à une transparence totale (remplissage invisible).

    Aa
    Le remplissage du cercle et du texte est totalement opaque
    fill-opacity:1
    Aa
    Le remplissage du cercle est du texte et à moitié opaque
    fill-opacity:0.5
    Aa
    Le remplissage du cercle et du texte est transparent
    fill-opacity:0
  • stroke-opacity: 0.25; stroke-opacity: 25%;

    La valeur par défaut de 1 (ou 100%) correspond à une opacité totale (pas de transparence) et, à l'inverse, une valeur de 0 ou de 0% correspond à une transparence totale.

    Aa
    La bordure du cercle et celle du texte sont totalement opaques
    stroke-opacity:1
    Aa
    La bordure du cercle est celle du texte sont à moitié opaques
    stroke-opacity:0.5
    Aa
    Les bordures du cercle et du texte sont transparentes
    stroke-opacity:0

Valeurs communes à toutes les propriétés :

fill-opacity: initial (1) fill-opacity: inherit fill-opacity: revert fill-opacity: revertLayer fill-opacity: unset
stroke-opacity: initial (1) stroke-opacity: inherit stroke-opacity: revert stroke-opacity: revertLayer stroke-opacity: unset

Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple interactif avec la propriété fill-opacity.

Le simulateur vous permet de jouer avec l'opacité du remplissage et celle du contour, sur une forme circulaire et sur du texte.

fill-opacity :
stroke-opacity :
Texte

Prise en charge par les navigateurs (compatibilité).

Colonne 1
Support par les navigateurs de la transparence partielle des éléments (propriété fill-opacity).
Colonne 2
Support par les navigateurs de la transparence des contours des éléments (propriété stroke-opacity).
1
Propriété
fill-opacity
2
Propriété
stroke-opacity
Estimation de la prise en charge globale.
95%
95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Edge

Opéra

Samsung Internet

Opéra Mobile

QQ Browser

Baidu Browser

Safari sur IOS

Safari

Firefox

Chrome

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse

Historiques propriétés fill-opacity et stroke-opacity.

  • SVG (Scalable Vector Graphics)

    Introduction des propriétés fill-opacity et stroke-opacity.
    WD
    30 Octobre 2001
    Document de travail.
    CR
    30 Avril 2002
    Candidat à la recommandation.
    PR
    09 Juin 2011
    Proposé à la recommandation.
    REC
    16 Août 2011
    Recommandation.

  • SVG (Scalable Vector Graphics)

    Pas de changement concernant les propriétés fill-opacity et stroke-opacity.
    WD
    28 Août 2012
    Document de travail.
    CR
    15 Septembre 2016
    Candidat à la recommandation.
    PR
    REC

  • Module CSS - Traits et remplissages - Niveau 3

    Pas de changement concernant les propriétés fill-opacity et stroke-opacity.
    WD
    13 Avril 2017
    Document de travail.
    CR
    PR
    REC

Voir aussi, concernant SVG.

Tout ce qui concerne les remplissages et contours en SVG est maintenant décrit dans le module de spécification CSS Fill and Stroke Module. fill-opacity et stroke-opacity sont maintenant décrites dans ce module, ainsi que les propriétés suivantes.

Propriétés :

⚠
fill
Définit l'ensemble des paramètres de remplissage d'une forme (couleur, etc).
⚠
fill-break
Définit comment le navigateur gère les ruptures dans cet élément (saut de page par exemple).
⚠
fill-color
Définit la couleur des remplissages en SVG.
⚠
fill-image
Définit la ou les images de remplissage. Cela peut être aussi des dégradés de couleur.
⚠
fill-origin
Définit la boîte qui sert de référence pour le positionnement des remplissages (images ou dégradés).
⚠
fill-position
Définit la position du remplissage, en accord avec la propriété fill-origin.
⚠
fill-repeat
Détermine comment est répétée l'image de remplissage dans une forme SVG.
fill-rule
Définit comment doit se faire le remplissage d'une forme comportant un trou, ou dont le contour se recoupe lui-même.
⚠
fill-size
Détermine les dimensions de l'image o du dégradé de remplissage sur une forme SVG.
paint-order
Définit l'ordre de dessin des différentes parties d'une forme (contour, remplissage, marqueurs).
stroke
Définit les paramètres de la bordure d'une forme en SVG.
stroke-align
Définit comment se positionne le trait de bordure par rapport aux limites de la forme, en SVG.
⚠
stroke-break
Définit comment sont coupées les bordures dans le cas d'une fragmentation.
⚠
stroke-color
Définit la couleur des contours en SVG.
⚠
stroke-dash-corner
Définit comment gérer les pointillés dans les angles du contour (SVG).
⚠
stroke-dash-justify
Définit l'ajustement des pointillés pour qu'un nombnre entier de segments soit compris dans le tracé (SVG).
stroke-dasharray
Définit les caractéristiques d'un pointillé (en SVG).
stroke-dashoffset
Définit le point de départ des pointillés sur un contour SVG.
stroke-linecap
Définit la forme des embouts de lignes (en SVG).
stroke-linejoin
Définit la forme des raccordements de segments en SVG.
stroke-miterlimit
Limite le dépassement des raccordements de segments avec un angle aigu.
stroke-opacity
Définit l'opacité (la transparence) du contour en SVG.
stroke-width
Définit l'épaisseur des tracés en SVG.