5

Tenho um SVG inserido com a tag img em meu site. Eu gostaria de saber se existe uma maneira de quando eu fizer o hover nessa imagem ela troque de cor, mas apenas com CSS?

Este é o conteúdo do meu SVG

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28" viewBox="0 0 28 28">
<path d="M27.563 0.172q0.516 0.375 0.422 1l-4 24q-0.078 0.453-0.5 0.703-0.219 0.125-0.484 0.125-0.172 0-0.375-0.078l-7.078-2.891-3.781 4.609q-0.281 0.359-0.766 0.359-0.203 0-0.344-0.063-0.297-0.109-0.477-0.367t-0.18-0.57v-5.453l13.5-16.547-16.703 14.453-6.172-2.531q-0.578-0.219-0.625-0.859-0.031-0.625 0.5-0.922l26-15q0.234-0.141 0.5-0.141 0.313 0 0.562 0.172z" fill="#8bcafe"></path>
</svg>

Gostaria de trocar o fill para outra cor no hover; Encontrei a seguinte solução

svg:hover path {
    fill: #fce57e;
}

Porém, ou estou usando errado, ou não é útil para o meu caso mesmo.

A imagem está inserida dentro de um button, a estrutura HTML é assim:

<button type="submit">
    <img src="#" alt="Enviar" data-src="public/img/send.svg" data-set="false">
    Enviar
</button>

Outro detalhe que talvez seja interessante citar, o atributo src da imagem só é setado quando o elemento esta no viewport, faço isso com Javascript.

2
  • Ela não muda a cor do meu SVG. Eu dou o hover mas ele continua com a cor #8bcafe;
    – waghcwb
    Commented 12/01/2015 às 15:34
  • Não tem nenhum código JS. Mas acabei encontrando uma solução. Pelo que parece que terei que usar o SVG inline, assim aquela solução que falei seria a correta... Será que existe uma forma de fazer usando a tag img?
    – waghcwb
    Commented 13/01/2015 às 17:40

2 Respostas 2

6

Você pode como dito utilizar o SVG de forma inline que é a forma mais fácil. Basta acrescentar o código citado alterando a propriedade fill com a cor desejada.

Exemplificando:

svg:hover path {
  fill: #fce57e;
}
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28" viewBox="0 0 28 28">
<path fill="#8bcafe" d="M27.563 0.172q0.516 0.375 0.422 1l-4 24q-0.078 0.453-0.5 0.703-0.219 0.125-0.484 0.125-0.172 0-0.375-0.078l-7.078-2.891-3.781 4.609q-0.281 0.359-0.766 0.359-0.203 0-0.344-0.063-0.297-0.109-0.477-0.367t-0.18-0.57v-5.453l13.5-16.547-16.703 14.453-6.172-2.531q-0.578-0.219-0.625-0.859-0.031-0.625 0.5-0.922l26-15q0.234-0.141 0.5-0.141 0.313 0 0.562 0.172z"></path>
</svg>

A forma que encontrei e mais recomendada foi utilizando este código do SNIPPETLIB: Replace all SVG images with inline SVG

Currently there isn't an easy way to embed an SVG image and then have access to the SVG elements via CSS. There are various methods of using JS SVG frameworks, but they are overly complicated if all you are doing is making a simple icon with a rollover state. This replaces all SVG images with inline SVGs so you can style them with css.

Basicamente o que ele faz é substituir todas as imagens de seu site com SVG INLINE permitindo que você possa acessar suas propriedades via CSS.

No seu caso você pode inserir a imagem no corpo do seu documento assim:

<img id="airplane" class="svg airplane" src="airplane.svg">

OBS: É necessário incluir a classe SVG enquanto AIRPLANE é para o exemplo. O ID não é necessário, mas pode ser útil de acordo com a sua necessidade.

Em seguida aplique o código jQuery (Em um arquivo separado ou no cabeçalho HEAD de sua página).

OBS: Não se esqueça de incluir o jQuery no HEAD da página.

/*  Replace all SVG images with inline SVG */
$('img.svg').each(function(){
var $img = $(this);
var imgID = $img.attr('id');
var imgClass = $img.attr('class');
var imgURL = $img.attr('src');

$.get(imgURL, function(data) {
    // Get the SVG tag, ignore the rest
    var $svg = $(data).find('svg');
    // Add replaced image's ID to the new SVG
    if (typeof imgID !== 'undefined') {
        $svg = $svg.attr('id', imgID);
    }
    // Add replaced image's classes to the new SVG
    if (typeof imgClass !== 'undefined') {
        $svg = $svg.attr('class', imgClass+' replaced-svg');
    }
    // Remove any invalid XML tags as per http://validator.w3.org
    $svg = $svg.removeAttr('xmlns:a');
    // Replace image with new SVG
    $img.replaceWith($svg);
  });
});

O código obtém todas as tags IMG com a classe SVG e substitui com o SVG INLINE a partir do arquivo vinculado no atributo SRC.

Feito isso, você tem acesso as propriedades SVG a partir do CSS permitindo alterar a cor do mesmo.

Da forma citada:

svg:hover path {
    fill: #fce57e;
}

Pelo ID:

#airplane:hover path {
    fill: #fce57e;
}

Pela classe:

.airplane:hover path {
    fill: #fce57e;
}

Exemplo online: Exemplo Hover SVG

IMPORTANTE: Não funciona com links de imagens de locais externos EX: http://natan.esy.es/exemplos/airplane.svg ou qualquer outro link de imagem, ou seja o arquivo da imagem precisa estar no servidor onde a sua página se encontra.

Exemplo do problema no JSBIN: Exemplo Hover Não Funciona

-1

Caso sejam poucos ícones tem uma gambiarra, você coloca o estilo CSS dentro do arquivo SVG e retirar o fill

 <style
     id="style4487">
     .class1 {

   fill: #ff9900;
}
.class1:hover {

   fill: #ff0000;
}</style>
1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .