Slide down svg fill on hover

Question

I have an svg i want to fill the background on hover and make it slide down, i made the hover effect but i cant make the fill slide down on hover how can i do that? here is my code:

svg:hover{ 
    fill: #080; 
}

i want to do something like this animation:

#grad:hover {
    background: red; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */
    background: linear-gradient(red, yellow);
}

score 0 · Answer 1 · answered Apr 23 '17 at 19:33

0

<svg xmlns="http://www.w3.org/2000/svg"
 width="226" height="226">
  <circle id="c" cx="110" cy="107" r="80" stroke="black"
      stroke-width="5" fill="red" />
      
  <style>
    #c{
      transition: all .3s ease-in-out;
    }
    #c:hover{
      fill:blue;
      transform:translateY(-20px);
    }
  </style>
</svg>

Something like that?

answered Apr 23 '17 at 19:33

Jesús Guillén Yparrea

74
8

I want the blue color to slide down, check this please: https://codepen.io/ianfarb/pen/fcmGt – jissylarry Apr 23 '17 at 19:44
you can try something like this: http://stackoverflow.com/questions/5239458/fill-svg-element-with-with-a-background-image-with-an-offset with an image being just a plain color, then you transform to simulate filling. – Jesús Guillén Yparrea Apr 23 '17 at 20:03

score 0 · Answer 2 · answered Apr 23 '17 at 21:03

How about this then? It uses SMIL to animate a gradient stop thus moving the red/blue transition point.

<svg xmlns="http://www.w3.org/2000/svg"
 width="226" height="226">
  <defs>
    <linearGradient id="MyGradient" x2="0%" y2="100%">
      <stop offset="0%"  stop-color="red">
        <animate attributeName="offset" from="0%"
  to="100%" dur="1s" begin="c.mouseover" 
  fill="freeze"/>
        <animate attributeName="offset" from="100%"
  to="0%" dur="1s" begin="c.mouseout" 
  fill="freeze"/>
  </stop>
          <stop offset="0%"  stop-color="blue"/>
      </linearGradient>
  </defs>
  <circle id="c" cx="110" cy="107" r="80" stroke="black"
      stroke-width="5" fill="url(#MyGradient)" />
</svg>

Slide down svg fill on hover

2 Answers2