The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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

    This reply has been reported for inappropriate content.

    @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

    This reply has been reported for inappropriate content.

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

    <form id="searchform" method="get" action="”>

    <!–<input type="text" name="s" id="search" placeholder=" Search" value="” size=”15″ /> –>
    <input type="image" alt="Search" src="/images/search.svg” />

    To this:

    <form id="searchform" method="get" action="”>

    <!–<input type="text" name="s" id="search" placeholder=" Search" value="” size=”15″ /> –>

    <path fill="#F27FA0" d="M13.564,22.087c-0.354,0.044-0.7,0.221-0.866,0.316l0,0l0,0c-0.168,0.098-0.499,0.311-0.716,0.603
    <path fill="#F27FA0" d="M3.81,7.02c3.641-2.102,8.313-0.85,10.414,2.791c2.102,3.64,0.85,8.312-2.791,10.414
    c-3.641,2.102-8.312,0.85-10.414-2.791C-1.083,13.793,0.169,9.122,3.81,7.02 M10.739,19.023c2.979-1.719,4.003-5.542,2.284-8.52
    <path fill="#F27FA0" d="M18.869,35.669c-1.094-1.896-6.804-11.412-6.652-12.164c0.094-0.477,1.204-1.118,1.66-0.969

    <path d="M13.564,21.087c-0.354,0.044-0.7,0.221-0.866,0.316l0,0l0,0c-0.168,0.098-0.499,0.311-0.716,0.603
    <path d="M3.81,6.02c3.64-2.102,8.313-0.85,10.414,2.791c2.102,3.64,0.85,8.312-2.791,10.414
    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
    <path d="M18.869,34.669c-1.094-1.896-6.804-11.412-6.652-12.164c0.094-0.477,1.204-1.118,1.66-0.969

    Basically, I replaced the input with the SVG file, but there are two draw backs to doing this, 1) I lose all input functionality and 2) the hit area is only active directly over the magnifying glass.

    Question: How do I retain the functionality of input without making the SVG a type="image" 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

    This reply has been reported for inappropriate content.

    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

    This reply has been reported for inappropriate content.

    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

    This reply has been reported for inappropriate content.

    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

    This reply has been reported for inappropriate content.

    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