SVG remplir la transparence de couleur / alpha?

Question

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.

Answer 1

Pour changer la transparence sur un code svg, la manière la plus simple est de l'ouvrir dans n'importe quel éditeur de texte et de chercher les attributs de style. Cela dépend du créateur du svg la façon dont les styles sont affichés. En tant qu'utilisateur d'Inkscape, la manière habituelle de définir les valeurs de style se fait à travers une balise de style tout comme si c'était du html mais en utilisant des attributs natifs du svg comme fill, stroke, stroke-width, opacity et ainsi de suite. opacity affecte l'objet svg entier, le chemin ou le groupe dans lequel il est précisé et fill-opacity, stroke-opacity affecteront juste la transparence du remplissage et du contour. Cela dit, j'ai également utilisé et testé le fait d'utiliser simplement fill et au lieu d'utiliser #fff utiliser à la place la norme rgba comme ceci rgba(255, 255, 255, 1) tout comme en css. Cela fonctionne bien pour la plupart des navigateurs modernes.

Gardez à l'esprit que si vous avez l'intention de retravailler votre svg ultérieurement, la meilleure pratique, d'après mon expérience, est de toujours avoir une version non modifiée sous la main. Inkscape est plus flexible avec les svgs modifiés manuellement mais Illustrator et CorelDraw peuvent rencontrer des problèmes lors de l'importation et de la modification de svgs.

Exemple

Exemple 2

Exemple 3

Remarquez que dans le dernier exemple, les balises fill-opacity et stroke-opacity ont été supprimées car la norme rgba couvre à la fois la couleur et le canal alpha dans les deux cas.

Answer 2

Je partage un conseil connexe que vous pourriez rencontrer lorsque vous souhaitez que le SVG hérite des styles du conteneur comme l'état normal, l'état survolé et l'état visité : utiliser fill='currentColor' sur le chemin. C'est ainsi que les SVG produits par les icônes de font awesome pourraient prendre n'importe quelle couleur de premier plan appliquée aux polices !