Get a free trial // Grow your CSS skills // Land your dream job

SVG Fill on Hover Problem

  • # July 13, 2013 at 10:21 pm

    I was reading the article by @chriscoyier about changing the fill of an SVG on hover, here. I then created my own CodePen, here, and it works. Success! But not totally. I then take the very same code and place it on my website, here. The magnifying glass does not change its fill. The only thing I can figure is that it has something to do with the fact that the magnifying glass is in a search form. Any suggestions on how to fix this? Thank you in advance!

    # July 14, 2013 at 3:18 am

    Are you actually using an SVG element or an SVG image?

    You can’t affect the fill of an image AFAIK.

    From the article.

    >The problem with both `` and background-image…

    >Is that you don’t get to control the innards of the SVG with CSS …

    # July 14, 2013 at 3:40 am

    @mintertweed, out of topic, but, is your pink-line-bar in your footer designed to be pushed right by I think just a pixel. Or maybe just because of the drop-shadow.

    # July 14, 2013 at 5:10 pm

    @Paulie_D: That would explain why it works in the CodePen and not on my website. I must have missed that bit of information. Yeah, in the CodePen, it’s an element. On my website, it’s an image. Hrm.

    @chester: The pink bar in the footer spans the entire width of the wrapper, which is 960 pixels, and is centered.

    # July 15, 2013 at 6:21 am

    Okay, so this is what I have so far, here. I changed the code from this:


    c-3.641,2.102-8.312,0.85-10.414-2.791C-1.083,12.793,0.169,8.122,3.81,6.02 M10.74,18.024c2.979-1.72,4.002-5.542,2.284-8.521

    and how do I increase the hit area so that you don’t have to be directly over the SVG for it to highlight?

    Thank you for any help you guys can provide!

    # July 15, 2013 at 6:40 am

    You’re not replacing the ``, you still need that, you are just replacing the ``.

    Perhaps a reduced case Codepen?

    # July 15, 2013 at 7:15 am

    Here is a quick CodePen. I was looking at all the different input types. It sounds like what I want is a type="submit", but I can’t figure out how to implement it with the SVG code.

    # July 15, 2013 at 7:34 am

    Okay, this is what I have thus far. It seems to work fairly well. In the link you posted, it says you can hide the “submit” button with CSS. How would I go about doing that? Also, the hit area is still held within the confines of the SVG. Any suggestions on how to increase it to a more user-friendly size?

    Edit: I should note that the bounding box for the SVG is fairly large. I thought that would increase the hit area, but I guess not.

    # July 15, 2013 at 7:40 am

    In this instance, I would give that specific button and ID (or class) and `display:none` it.

    Next, add the hover to the **whole** svg but apply it to the `.glass`

    # July 15, 2013 at 7:43 am

    Awesome sauce! Thank you, @Paulie_D. You have always been very helpful!

    # July 15, 2013 at 7:45 am


    Hope you can get it all hooked up right!

    # July 15, 2013 at 8:16 am

    Check out that sexy magnifying glass. Now, I just need to figure out what I want to do with the input type="text" and I’ll be finished with this search form madness.

    # July 15, 2013 at 8:25 am

    Still a little work to do. :)

    Hide the #svg-button and change the hover as it’s only on the `.glass` at the moment, I think.

    Updated the Pen a little.

    Change the **visible** input type to “search”, set that and the svg to `inline-block`, aligned them middle and adjusted the height of the search box.

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed