[Pro] How to give SVGs a rollover (hover) color

Walter,

I just tested your approach of changing the “background color.” It does shows in the browser alright, but a colored square (the background color) sitting behind the SVG is not what I had in mind. Sure, it’s a “rollover effect,” but it is not lovely to behold.

What I am trying to do is get the SVG itself to change colors on hover (mouseover). And it should do that even if there are gaps and holes (transparent parts) in the SVG itself, such that anyone you mouseover the entire SVG, the SVG color should change.

Here is an example of the mouseover-color change I am trying to achieve:

http://codepen.io/helmemat/pen/ndJgz

But keep in mind the SVG in the above example has its code inline with the HTML, which again, would not be cached. So even though I know an inline SVG is a solution, I want to stick with the tag if possible. But how to make the SVG itself change colors on hover! That’s the question!

Thanks,

James


freewaytalk mailing list
email@hidden
Update your subscriptions at: