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.
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.
Réponses:
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 traitopacity
pour l'objet entierfill_opacity
, mais en SVG et CSS, c'est le cas fill-opacity
.
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.
rgba
en rgb
et lui a automatiquement ajouté l' fill-opacity
attribut. 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.
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é).
Utilisez l'attribut fill-opacity
dans 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 fill
couleur à appliquer fill-opacity
.
Voir mon exemple .
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"
.
fill="none"
fonctionne, mais fill="transparent"
ne fonctionne pas.
fill="none"
avecpointer-events="visible"
.