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?
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.