SVG couleur de remplissage de la transparence / alpha?

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

J'ai essayé d'ajouter deux valeurs pour le remplissage de la balise (changement de fill="#044B94 de" fill="#044B9466"), mais cela ne fonctionne pas.

InformationsquelleAutor Ollie Glass | 2011-05-18
  1. 586

    Vous utilisez un attribut supplémentaire; fill-opacity: Cet attribut prend un nombre décimal compris entre 0.0 et 1.0 inclus; lorsque 0.0 est complètement transparent.

    Par exemple:

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

    En outre, vous avez les éléments suivants:

    • stroke-opacity de l'attribut de l'avc
    • opacity pour l'ensemble de l'objet
    InformationsquelleAutor Williham Totland
  2. 74

    Comme un pas encore complètement normalisée solution (même si, en alignement avec la couleur de la syntaxe en CSS3), vous pouvez utiliser l'e.g fill="rgba(124,240,10,0.5)". Fonctionne très bien sous Firefox, Opera, Chrome.

    Voici un exemple.

    • Regarde w3.org/TR/SVG/painting.html#FillProperties (faites défiler vers le bas un peu pour le fill-opacity); cela semble assez standardisée pour moi.
    • oui fill-opacity est dans le SVG recommandation, et il n'y a pas de problème avec l'utilisation que. Le CSS3 syntaxe est en CSS3 Couleur, qui est une étape loin de devenir une recommandation du w3c. SVG 1.1 ne fait pas référence CSS3 Couleur parce qu'il n'était pas disponible à l'époque, une version future de SVG sera probablement.
    • Ah. Me semble que j'ai mal lu votre réponse car "il n'y a pas pleinement de solution standard, mais:..."; ce qui serait faux. Encore; à l'aide de rgba() est inutile lorsque vous disposez d'un libre-debout opacité de la valeur à régler.
    • Si vous êtes en train de faire la plupart CSS vous attendent probablement les mêmes couleurs pour les "fonctionne" en SVG trop, non? L'alignement est une bonne chose, de plus il apporte un peu plus de fonctionnalités avec la hsla() syntaxe (qui doit aussi travailler dans les navigateurs qui le supportent rgba() en svg).
    • Je veux juste mentionner un endroit où il ne semble pas que le travail est dans Inkscape
    • J'ai utilisé cette solution sur Highcharts, et cela a fonctionné. Il converti rgba à rgb et ajoute automatiquement la fill-opacity attribuent. Je ne suis pas sûr si ce est la façon dont il fonctionne dans la normale SVGs trop, mais c'est la façon dont il a travaillé là. De toute façon, merci.
    • Puis-je obtenir certains éclaircissements quels sont les navigateurs supportent rgba dans inline svgs?
    • Chrome 66 n'est pas de le faire à l'instant.
    • l'exemple fonctionne très bien sur Chrome 66, pas sûr de ce que tu veux dire.
    • Cela ne semble pas fonctionner pour moi. (Version 74.0.3729.131 (Official Build) (64-bit) (cohort: 74_131_Win) en cours d'exécution sur Windows 7 Service Pack 1 Build 7601.24411)

    InformationsquelleAutor Erik Dahlström
  3. 4
    fill="#044B9466"

    C'est un De couleur RVBA en hexadécimal à l'intérieur de la SVG, définis avec des valeurs hexadécimales. Ceci est valable, mais tous les programmes ne peuvent l'afficher correctement...

    Vous pouvez trouver les navigateurs pris en charge pour cette syntaxe ici: https://caniuse.com/#feat=css-rrggbbaa

    En août 2017: RGBA les couleurs de remplissage s'affiche correctement sur Mozilla Firefox (54), Apple Safari (10.1) et Mac OS X Finder "Vue Rapide". Cependant, Google Chrome n'a pas en charge cette syntaxe jusqu'à la version 62 (a précédemment pris en charge à partir de la version 54 avec la Plate-forme Expérimentale des Caractéristiques indicateur activé).

    • Savez-vous si ils ont changé quelque chose récemment? J'ai eu un travail de chrome application utilisé fill:rgb(...) et maintenant il est complètement cassé. Je woul apprecciate de votre aide!
    • Qt SVG (bibliothèque de Qt 5.9.3) aussi ne peut pas gérer RGBA les couleurs jusqu'à présent, ni comme "#00000000" hex forme, ni comme "rgba".
    InformationsquelleAutor Mr-IDE
  4. 0

    L'utilisation de l'attribut fill-opacity dans votre élément SVG.

    Valeur par défaut est 1, le minimum est de 0, dans l'étape d'utiliser les valeurs après la virgule EX: 0.5 = 50% de l'alpha. Remarque: Il est nécessaire de définir fill couleur à appliquer fill-opacity.

    Voir mon exemple.

    Références.

    InformationsquelleAutor Darlan Dieterich
  5. 0

    Pour faire un remplissage complètement transparent, fill="transparent" semble fonctionner dans les navigateurs modernes. Mais il n'a pas de travail dans Microsoft Word (pour Mac), j'ai eu à utiliser fill-opacity="0".

    InformationsquelleAutor Brett Donald