web-dev-qa-db-fra.com

Couleur de remplissage SVG transparence/alpha?

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

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

colorssvgtransparencyalphafill
355
Ollie Glass

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

Par exemple:

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

De plus, vous avez les éléments suivants:

  • stroke-opacity attribut pour le trait
  • opacity pour l'objet entier
556
Williham Totland

En tant que solution pas encore complètement normalisée (bien que conforme à la syntaxe de couleur de CSS3), vous pouvez utiliser par exemple fill="rgba(124,240,10,0.5)". Fonctionne bien dans Firefox, Opera, Chrome.

Voici un exemple .

71
Erik Dahlström
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 dans les "vues rapides" de Mozilla Firefox (54), d'Apple Safari (10.1) et de Mac OS X Finder. Toutefois, Google Chrome n'a pas pris en charge cette syntaxe jusqu'à la version 62 (elle était auparavant prise en charge à partir de la version 54 avec l'indicateur Fonctionnalités de la plateforme expérimentale activé).

4
Mr-IDE

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

0
Brett Donald

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

La valeur par défaut est 1, la valeur minimale est 0, utilisez à l’étape les valeurs décimales EX: 0.5 = 50% de alpha. Remarque: Il est nécessaire de définir la couleur fill pour appliquer fill-opacity.

Voir mon exemple .

Références .

0
Darlan Dieterich