Couleur de remplissage SVG transparence / alpha?

417

Est-il possible de définir un niveau de transparence ou alpha sur les couleurs de remplissage SVG?

Je l' ai essayé d' ajouter deux valeurs à la balise de remplissage (changer de fill="#044B94"à fill="#044B9466"), mais cela ne fonctionne pas.

colors svg transparency alpha fill Verre Ollie
la source
Pour toute personne intéressée, pour recevoir des clics sur un remplissage vide: voir SVG Detect Onclick events sur "fill: none" - c'est-à-dire la possibilité d'utiliser fill="none"avec pointer-events="visible".
Fabien Snauwaert

Réponses:

646

Vous utilisez un attribut supplémentaire; fill-opacity: Cet attribut prend un nombre décimal compris entre 0,0 et 1,0, inclus; où 0,0 est complètement transparent.

Par exemple:

<rect ... fill="#044B94" fill-opacity="0.4"/>

De plus, vous disposez des éléments suivants:

  • stroke-opacity attribut pour le trait
  • opacity pour l'objet entier
Williham Totland
la source
3
MDN fournit un bon aperçu de cet attribut et d'autres attributs connexes dans son didacticiel SVG, developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/…
t-mart
4
vous pouvez également les placer dans l'attribut style: <rect style = "fill: # 044B94; fill-opacity: 0.4;" />
PeterVermont
Dans ce qui précède, "fill-opacity" et "stroke-opacity" doivent être remplacés par "fill_opacity" et "stroke_opacity" (c'est-à-dire remplacer les tirets par des traits de soulignement).
mermaldad
1
@mermaldad C'est incorrect; voir la spécification . Dans certaines langues qui ne permettent pas aux noms de contenir des traits d'union, les bibliothèques pour travailler avec SVG utilisent des noms comme fill_opacity, mais en SVG et CSS, c'est le cas fill-opacity.
Williham Totland
@WillihamTotland, merci pour la correction. J'ai sauté mentalement directement sur "comment implémenter ceci en utilisant svgwrite en Python". Là, vous devez remplacer les tirets par des traits de soulignement.
mermaldad
78

En tant que solution pas encore complètement standardisée (bien qu'en alignement avec la syntaxe des couleurs dans CSS3), vous pouvez utiliser par exemple fill="rgba(124,240,10,0.5)". Fonctionne très bien dans Firefox, Opera, Chrome.

Voici un exemple .

Erik Dahlström
la source
3
En regardant w3.org/TR/SVG/painting.html#FillProperties ( faites défiler un peu pour l'opacité de remplissage); cela me semble assez complètement standardisé.
Williham Totland
10
@williham: oui l'opacité de remplissage est dans la recommandation SVG, et il n'y a aucun problème à l'utiliser. La syntaxe CSS3 est en couleur CSS3, ce qui est à un pas de devenir une recommandation w3c. SVG 1.1 ne fait pas référence à CSS3 Color car il n'était pas disponible à l'époque, une future version de SVG le fera probablement.
Erik Dahlström,
7
Je veux juste mentionner, un endroit où cela ne semble pas fonctionner est dans Inkscape
George Mauer
2
J'ai utilisé cette solution sur Highcharts, et cela a fonctionné. Il s'est converti rgbaen rgbet lui a automatiquement ajouté l' fill-opacityattribut. Je ne sais pas si c'est ainsi que cela fonctionne dans les SVG normaux, mais c'est ainsi que cela a fonctionné là-bas. Quoi qu'il en soit, merci.
Hanna
3
Puis-je obtenir des éclaircissements sur les navigateurs qui prennent réellement en charge rgba en svgs en ligne?
redanimalwar
6 
fill="#044B9466"

Il s'agit d'une couleur RGBA en notation hexadécimale à l'intérieur du SVG, définie avec des valeurs hexadécimales. Ceci est valide, mais tous les programmes ne peuvent pas l'afficher correctement ...

Vous pouvez trouver le support du navigateur pour cette syntaxe ici: https://caniuse.com/#feat=css-rrggbbaa

À partir d'août 2017: les couleurs de remplissage RGBA s'afficheront correctement sur Mozilla Firefox (54), Apple Safari (10.1) et "Quick View" de Mac OS X Finder. Cependant, Google Chrome n'a pas pris en charge cette syntaxe jusqu'à la version 62 (était précédemment pris en charge à partir de la version 54 avec l'indicateur de fonctionnalités de la plateforme expérimentale activé).

Mr-IDE
la source
Savez-vous s'ils ont changé quelque chose récemment? J'avais une application chrome qui utilisait fill: rgb (...) et maintenant elle est complètement cassée. J'apprécierai votre aide!
Mariodiar
La bibliothèque Qt SVG (Qt 5.9.3) ne peut pas non plus gérer les couleurs RGBA jusqu'à présent ni en forme hexadécimale "# 00000000" ni en tant que "rgba".
bkausbk
2

Utilisez l'attribut fill-opacitydans votre élément de SVG.

La valeur par défaut est 1, le minimum est 0, à l'étape utilisez des valeurs décimales EX: 0,5 = 50% d'alpha. Remarque: Il est nécessaire de définir la fillcouleur à appliquer fill-opacity.

Voir mon exemple .

Références .

Darlan Dieterich
la source
2

Pour rendre un remplissage complètement transparent, fill="transparent"semble fonctionner dans les navigateurs modernes. Mais cela ne fonctionnait pas dans Microsoft Word (pour Mac), je devais l'utiliser fill-opacity="0".

Brett Donald
la source
Pour l' éditeur de graphiques vectoriels Inkscape 0.92.4.0 , fill="none"fonctionne, mais fill="transparent"ne fonctionne pas.
SAMM