How do I make an SVG image change color when hovering over the object tag?

Hey gareth connop ,

I have put together another example for you....

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

I wrapped the embedded SVG tag with a span tag.

<span>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<path fill="#933028" d="M204.316,0H95.664C83.827,0,74.252,9.595,74.252,21.432v257.146c0,11.816,9.575,21.422,21.412,21.422
h108.652c11.836,0,21.432-9.605,21.432-21.422V21.432C225.748,9.595,216.152,0,204.316,0z M133.214,20.725h34.106
c2.667,0,4.809,2.141,4.809,4.797s-2.142,4.787-4.809,4.787h-34.106c-2.646,0-4.797-2.141-4.797-4.797
S130.568,20.725,133.214,20.725z M149.646,286.941c-7.454,0-13.493-6.061-13.493-13.493c0-7.454,6.04-13.493,13.493-13.493
c7.424,0,13.473,6.039,13.473,13.493C163.119,280.892,157.07,286.941,149.646,286.941z M214.517,246.957H85.453V53.054h129.063
V246.957h0.011H214.517z"/>
<rect x="85.453" y="53.054" fill="#343434" width="129.063" height="193.903" id="screen"/>
</svg>
</span>

Then targeted a specific path in the embedded SVG path.

 id="screen"

Thus allowing the user to interact with the target through the wrapping span through CSS.

span:hover #screen { fill: darkslateblue; }

Hey gareth connop did you see the example I put up?

I target the embedded svg elements paths using id's. Try that.

http://cdpn.io/ndJgz

You could always use an image-mask with the svg to show the background color. Then on hover alter the background color.

http://www.w3.org/TR/css-masking/#the-mask-image

Check out the twitter button on this page. I used the mask image technique:

http://stopvisualpollution.com/

Thanks Mat,

Unfortunately I don't see using an image mask as an option, due to it only really being supported in Webkit browsers. Such a shame considering your example looks great.

This is causing me such a headache. I've spent 2 days trying to come up with a solution to this.

gareth connop , Can you put your example up on CodePen and comment out what you want it to do?

I've been having the same problem with the logo for a site I'm working on, but quickly moved on to the rest of the build (I'll get back to it ;) )

Perhaps a span tag or div tag surrounding the SVG could be targeted? If CSS pseudos don't work then I'm sure selecting with Javascript would.

Could be worth a try?

gareth connop & Spen Taylor

Are you looking to do something like this?

http://cdpn.io/ndJgz

In my case - something similar, it would literally just be highlighting my logo as I hover over. I've not tried using a direct SVG tag, only an object tag - which w3schools say is not scriptable which may well be the reason for it not working! I'll try an SVG tag next time I'm working on that project...

Ta Mat!

HI Mat, I've just tested your method and sadly I get the same issue of not getting a hover effect when mousing over any transparent parts of the image.

Thanks again for all your help Mat but I think I haven't conveyed exactly what it is that I'm after.

I want to be able to hover over any part of the icon (including transparent parts, like the screen) and just the current fills change color. So all transparent parts of the image stay transparent and just the rest changes color. So it would work like the anchor tag next to it (if you hover over any part of the anchor tag it changes the text color).

Does that make what I'm trying to do any clearer?

Thanks again

@gareth connop,

I have updated the example to fit your description.

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

This is what you were after right?

Perfect!! Exactly what I was after.

Thanks Mat. One last thing though. How do I change the hover area to only be the width and height of the phone image?

When you export from an application like illustrator make sure your Artboard is wrapped tightly around the graphic. Watch this Quick Tip to get familiar with exporting SVG's.

http://www.youtube.com/watch?v=CbzTjamoDyM

Thanks again Mat for all your help with this. Hopefully now I can finish off the site.

Np gareth connop Im glad I could help... Happy coding!

wow nice i have been looking for this for hours thanks :)

Awesome, I have an additional question. How do you get the SVG's hover state to work inside a button and not only work when you are directly hovering over the SVG. http://codepen.io/brennafrench519/pen/LxJBmw

I have put an example of what I have on Codepen: http://codepen.io/garethconnop/pen/pdiDr

I may have to move on myself soon Spen. This is painful.