3

I have an img tag with a src attribute referring to an icon from an external source. This icon renders as an svg. I want to change the colour of the icon to blue on hover.

The colour has to be exactly #4C8FDF, so the trick with filter on img is not working. I also prefer not to embed the svgs in the markup (I have 15 svg files, so this technique would not scale easily).

HTML:

<div class="test">
  <img src="https://x.svg" alt="test">
</div>

SVG content of the icon (not visible in the DOM. only the img tag is visible in the DOM)

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
 <path fill="#333" fill-rule="evenodd" d="M11.7 9.3c.4.4.4 1 0 1.4-.2.2-.5.3-.7.3-.2 0-.5-.1-.7-.3L8 8.4V18c0 .6-.4 1-1 1s-1-.4-1-1V8.4l-2.3 2.3c-.4.4-1 .4-1.4 0-.4-.4-.4-1 0-1.4l4-4c.1-.1.2-.2.3-.2.3-.1.5-.1.8 0 .1 0 .2.1.3.2l4 4zm10 4c.4.4.4 1 0 1.4l-4 4c-.1.1-.2.1-.3.2-.1.1-.3.1-.4.1-.1 0-.3 0-.4-.1-.1 0-.2-.1-.3-.2l-4-4c-.4-.4-.4-1 0-1.4.4-.4 1-.4 1.4 0l2.3 2.3V6c0-.6.4-1 1-1s1 .4 1 1v9.6l2.3-2.3c.4-.4 1-.4 1.4 0z"/>
</svg>

I tried referring to the icon in css to change it on hover, but this didn't work

.test img svg:hover {
  fill: red;
}

Is there any other way of accessing the svg path's fill colour on hover via css?

Paul Wheeler
  • 18,988
  • 3
  • 28
  • 41
Dominika Kulakowska
  • 57
  • 4
  • Please read this article: [The Many Ways to Change an SVG Fill on Hover (and When to Use Them)](https://css-tricks.com/the-many-ways-to-change-an-svg-fill-on-hover-and-when-to-use-them/) – enxaneta May 23 '19 at 14:27
  • Given all your constraints I think there probably is no possible solution here. – Robert Longson May 23 '19 at 15:30
  • There is a way to do this without embedding the entire SVG, however you *have* to be able to modify the original SVG files slightly: I've made an example here: https://jscript.sh/files/home/sflanker/public/hover_svg.html If you can relax your constraints slightly I will vote to re-open this question and post an answer explaining the technique. – Paul Wheeler May 24 '19 at 01:12
  • @PaulWheeler thanks a lot! I am in fact able to modify the original svg files! Is there a way of contacting you directly? I need this feature ASAP. my email address: dominika-kulakowska@hotmail.com Do you think you could drop me an email? – Dominika Kulakowska May 24 '19 at 06:42
  • 1
    Voted to reopen. Given the answers to the linked questions specifically will not work for the requester, and there is a solution that will work, this is not a duplicate. – Paul Wheeler May 24 '19 at 20:26
  • Should reopen, answers and links provided have nothing to do with this particular issue – Neïl Rahmouni May 09 '23 at 15:49

0 Answers0