Gostaria de compartilhar com vocês uma dica de código para alterar a cor de um elemento, uma imagem, preferencialmente um arquivo SVG utilizando CSS.
Existem várias técnicas para se alterar a cor de um arquivo SVG utilizando CSS acredito que a mais conhecida seja FILL, mas para utilizar esse código CSS você tem que incluir o código SVG dentro do HTML, a técnica se chama Inline SVG, exemplo:
<svg width="24" height="24" viewBox="0 0 24 24"> <path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path> </svg> svg:hover { fill: red; }
Mas existe outra técnica que eu gosto bastante que é utilizar FILTER, nesse caso você pode incluir a imagem dentro do HTML como um arquivo mesmo exemplo:
.icon { background-image: url(icon.svg); } .icon:hover{ filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%); }
Porém calcular corretamente o FILTER pode ser um problema, ou poderia ser um problema, felizmente alguém já desenvolveu um código para converter uma cor hexadecimal para a combinação do filtro, o crédito deste código vai para Barrett Sonntag.
See the Pen
CSS filter generator to convert from black to target hex color by Barrett Sonntag (@sosuke)
on CodePen.
1 Comment
Caramba, que topzera. Muito obrigado irmao.
Vi algumas gambiarras feias pra fazer isso, outras maneiras usando o jurassico JQuery, mas esse metodo é muito simples e show de bola.
VALEU!