0

Queria saber se há alguma forma de editar os atributos de estilo, mais especifico o atributo de fill, de uma imagem importada do formato .svg.

Exemplo:

No meu html eu importo um arquivo .svg através de um <img> dessa forma:

<img class="menuimage" src="./assets/target.svg">

Esse é são as linhas de código dentro do arquivo target.svg:

<svg width="79" height="79" viewBox="0 0 79 79" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M39.5 0C17.6868 0 0 17.6868 0 39.5C0 61.3132 17.6868 79 39.5 79C61.3132 79 79 61.3132 79 39.5C79 17.6868 61.3132 0 39.5 0ZM56.4286 41.6161C56.4286 42.004 56.1112 42.3214 55.7232 42.3214H42.3214V55.7232C42.3214 56.1112 42.004 56.4286 41.6161 56.4286H37.3839C36.996 56.4286 36.6786 56.1112 36.6786 55.7232V42.3214H23.2768C22.8888 42.3214 22.5714 42.004 22.5714 41.6161V37.3839C22.5714 36.996 22.8888 36.6786 23.2768 36.6786H36.6786V23.2768C36.6786 22.8888 36.996 22.5714 37.3839 22.5714H41.6161C42.004 22.5714 42.3214 22.8888 42.3214 23.2768V36.6786H55.7232C56.1112 36.6786 56.4286 36.996 56.4286 37.3839V41.6161Z" fill="#FF8500"/>
</svg>

Eu queria editar a propriedade fill de dentro desse <img> porém diretamente do css dessa forma:

.menuimage:hover path{
   fill: #FF8500;
}

Eu pesquisei e vi que eu consigo fazer isso com jQuerry, porém eu realmente quero fazer isso sem nenhum adição externa e sem colocar o svg direto no index. Há alguma forma?

1
  • Não, não é possível. Depois que você adiciona a url do SVG dentro de img[src], o estilo interno não pode ser alterado. O que pode ser feito é adicionar a lógica no código do SVG diretamente. Commented 18/02/2021 às 17:03

2 Respostas 2

1

Seria dessa forma?:

.menuimage svg path:hover {
   fill: black;
}

.menuimage2 svg path:hover {
   fill: blue;
}
<div class="menuimage">
 <svg width="79" height="79" viewBox="0 0 79 79" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M39.5 0C17.6868 0 0 17.6868 0 39.5C0 61.3132 17.6868 79 39.5 79C61.3132 79 79 61.3132 79 39.5C79 17.6868 61.3132 0 39.5 0ZM56.4286 41.6161C56.4286 42.004 56.1112 42.3214 55.7232 42.3214H42.3214V55.7232C42.3214 56.1112 42.004 56.4286 41.6161 56.4286H37.3839C36.996 56.4286 36.6786 56.1112 36.6786 55.7232V42.3214H23.2768C22.8888 42.3214 22.5714 42.004 22.5714 41.6161V37.3839C22.5714 36.996 22.8888 36.6786 23.2768 36.6786H36.6786V23.2768C36.6786 22.8888 36.996 22.5714 37.3839 22.5714H41.6161C42.004 22.5714 42.3214 22.8888 42.3214 23.2768V36.6786H55.7232C56.1112 36.6786 56.4286 36.996 56.4286 37.3839V41.6161Z" fill="#FF8500"/>
 </svg>
</div>

<div class="menuimage2">
 <svg width="79" height="79" viewBox="0 0 79 79" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M39.5 0C17.6868 0 0 17.6868 0 39.5C0 61.3132 17.6868 79 39.5 79C61.3132 79 79 61.3132 79 39.5C79 17.6868 61.3132 0 39.5 0ZM56.4286 41.6161C56.4286 42.004 56.1112 42.3214 55.7232 42.3214H42.3214V55.7232C42.3214 56.1112 42.004 56.4286 41.6161 56.4286H37.3839C36.996 56.4286 36.6786 56.1112 36.6786 55.7232V42.3214H23.2768C22.8888 42.3214 22.5714 42.004 22.5714 41.6161V37.3839C22.5714 36.996 22.8888 36.6786 23.2768 36.6786H36.6786V23.2768C36.6786 22.8888 36.996 22.5714 37.3839 22.5714H41.6161C42.004 22.5714 42.3214 22.8888 42.3214 23.2768V36.6786H55.7232C56.1112 36.6786 56.4286 36.996 56.4286 37.3839V41.6161Z" fill="#FF8500"/>
 </svg>
</div>

Você usa <nome da classe> svg path:hover para alterar a cor (fill) durante o evento hover de cada svg de acordo com a classe que ele do elemento que ele está contido.


Por motivos de seguranca, carregar SVG dentro de uma tag img tem algumas restrições. Veja aqui.

2
  • Não teria uma forma de fazer isso, sem colocar o svg direto e sim com um <img src..>?
    – Ellathet
    Commented 18/02/2021 às 16:58
  • Se eu puder dar um conselho, trocaria .menuimage svg path:hover por .menuimage:hover svg path senão o hover só funciona na parte alaranjada da imagem e não no botão inteiro. Commented 18/02/2021 às 18:06
0

Para filtrar para uma cor específica, veja um exemplo desse código no Codepen: https://codepen.io/sosuke/pen/Pjoqqp

Usando o exemplo dele:

a saída para #00EE00 é:

filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);

Adicione o CSS filtera esta classe.

.filter-green{
        filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
    }

VEJA MAIS EM: https://stackoverflow.com/questions/22252472/how-to-change-the-color-of-an-svg-element#:~:text=You%20can't%20change%20the,or%20using%20inline.

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 .