CODEWITHSUNDEEP
htmlcsssvg
Kimberly Wright
Kimberly Wright

Reputation: 541

Animate Fill SVG on Hover Mode

Hi guys I am trying to animate the FILL of my SVG.

What I want is that when I hovered my mouse the FILL will come out from the bottom to top filling in the whole circle. But I am stack how to apply the same using CSS3 transfrom: scale property.

enter image description here

As an example check out this demo: http://tympanus.net/Tutorials/CircleHoverEffects/ That example is CSS not SVG I need to apply this pop-up FILL effect on my SVG.

here's my code so far:

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px"
     height="200px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" id="icon">

<style type="text/css">     
    .st0
    {
        fill:none;
        stroke:#F2F2F2;
        stroke-width:4;
        stroke-miterlimit:10;
    }

    #icon .st0{
        -webkit-transition: .5s;
    }

    #icon:hover .st0{ 
        fill: #ffffff;
        stroke: #1f8a4c;
        cursor: pointer;
    }       
</style>


<g id="container">
    <circle class="st0" cx="101" cy="99" r="89.333"/>
</g>

<g id="icon-details">
    <path class="st0" d="M146.899,134.202c3.856,4.702,2.772,11.963-2.418,16.218l0,0c-5.192,4.258-12.523,3.896-16.38-0.806
        l-30.004-36.594c-3.855-4.701-2.772-11.964,2.418-16.22l0,0c5.19-4.256,12.523-3.895,16.377,0.808L146.899,134.202z"/>
    <circle class="st0" cx="77.843" cy="72.434" r="33.331"/>
    <circle class="st0" cx="77.844" cy="72.434" r="22.343"/>
</g>

</svg>

Check out JSFIDDLE: http://jsfiddle.net/uhkwLuph/2/

Upvotes: 2

Views: 5622

Answers (1)

Alfred Xing
Alfred Xing

Reputation: 4632

I came up with an interesting but working solution. We want to use scale, but out initial fill size should be 0 (scaling a 0-size element does nothing).

However, we know that a pixel is a pixel, and so a circle with as size of, let's say, 0.1 pixels will not render. Thus, we set the initial "fill" circle size to be small, then scale by a large factor:

<g id="fill-group" transform="translate(101, 99)">
    <circle class="fill" r="0.1" />
</g>

Also note here that we use a transform property on the group instead of setting cx and cy like on the other elements so that the circle scales with the correct origin.

Then the CSS would look like:

#icon .fill {
    -webkit-transition: .5s;
    fill: #ffffff;
}
#icon:hover .fill {
    -webkit-transform: scale(893, 893);
}

And here's a Fiddle to show it: http://jsfiddle.net/uhkwLuph/20/

Upvotes: 3

Related Questions