Est-il possible de définir une transparence ou un niveau alpha sur les couleurs de remplissage SVG?
J'ai essayé d'ajouter deux valeurs à la balise de remplissage (en la modifiant de fill="#044B94" à fill="#044B9466"), mais cela ne fonctionne pas.
MDN fournit un bon aperçu de cette et d'autres attributs connexes dans leur Tutoriel SVG, developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/…
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 traits d'union par des traits de soulignement).
En regardant w3.org/TR/SVG/painting.html#FillProperties (faire défiler un peu pour fill-opacity); cela me semble assez bien normalisé.
@williham: oui, fill-opacity est dans la recommandation SVG, et il n'y a aucun problème à l'utiliser. La syntaxe CSS3 est dans CSS3 Color, qui est à un pas de devenir une recommandation du w3c. SVG 1.1 ne fait pas référence à CSS3 Color car il n'était pas disponible à l'époque, une version future de SVG le fera probablement.
Ah. Il semblerait que j'ai mal lu votre réponse comme étant "il n'y a pas de solution entièrement normalisée, mais : ..."; ce qui serait faux. Néanmoins; utiliser rgba() semble un peu inutile quand vous avez une valeur d'opacité indépendante à ajuster.
Pour rendre un remplissage complètement transparent, fill="transparent" semble fonctionner dans les navigateurs modernes. Mais cela n'a pas fonctionné dans Microsoft Word (pour Mac), j'ai dû utiliser fill-opacity="0".
Mise à jour
Comme indiqué dans le commentaire ci-dessous de Alex Henrie, fill="none" pourrait être un meilleur choix.
fill="#044B9466"Ceci est une couleur RGBA en notation hexadécimale à l'intérieur du SVG, définie avec des valeurs hexadécimales. Cela est valide, mais tous les programmes ne peuvent pas l'afficher correctement...
Vous pouvez trouver la prise en charge du navigateur pour cette syntaxe ici : https://caniuse.com/#feat=css-rrggbbaa
En 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 ne prenait pas en charge cette syntaxe avant la version 62 (était précédemment pris en charge à partir de la version 54 avec le drapeau Experimental Platform Features activé).
En avril 2021, la version 1.0.2 de Inkscape ne peut pas lire ce format dans les fichiers SVG, et convertit plutôt toute couleur RGBA en noir opaque. Le rapport de bogue se trouve ici : https://gitlab.com/inkscape/inbox/-/issues/1195
Utilisez l'attribut fill-opacity dans votre élément SVG.
La valeur par défaut est 1, le minimum est 0, en utilisant des valeurs décimales EX : 0.5 = 50% de l'opacité. Remarque : il est nécessaire de définir la couleur de remplissage fill pour appliquer fill-opacity.
Voir mon exemple.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
3 votes
Pour toute personne intéressée, pour recevoir des clics sur un remplissage vide: voir SVG Detect Onclick events on “fill: none” – c'est-à-dire la possibilité d'utiliser
fill="none"avecpointer-events="visible".