CODEWITHSUNDEEP
cssanimationsvgfade
jhonvanderveer
jhonvanderveer

Reputation: 3

Can't get a SVG circle animated

I got a map with 12 dots that each need to fade in on hover like in the demo. The problem is that I can't get the radius animated. Is it possible to fade the radius size of the SVG in with CSS or is there another way to do it? My second problem is that I can't get a background image in my SVG's. Is there a solution?

My code...

Upvotes: 0

Views: 1473

Answers (1)

Sudheer
Sudheer

Reputation: 2985

ya it is possible..

Fiddle

css 

#container {
}

#kaart {
}

.fullkaart {
    fill:#7FC577;
}

.cirkel {
fill: green;
-webkit-transform: scale(1);
-moz-transform: scale(1);
    -ms-transform: scale(1);
     -o-transform: scale(1);
        transform: scale(1);
-webkit-transform-origin: center;
   -moz-transform-origin: center;
    -ms-transform-origin: center;
     -o-transform-origin: center;
        transform-origin: center;
    -webkit-transition: fill, -webkit-transform
   -moz-transition: fill, -webkit-transform
    -ms-transition: fill, -webkit-transform
     -o-transition: fill, -webkit-transform
        transition: fill, -webkit-transform
  -webkit-transition-duration: 3s;
   -moz-transition-duration: 3s;
    -ms-transition-duration: 3s;
     -o-transition-duration: 3s;
        transition-duration: 3s;
     }

     .cirkel:hover{
       fill: yellow;
       -webkit-transform: scale(2);
   -moz-transform: scale(2);
    -ms-transform: scale(2);
     -o-transform: scale(2);
        transform: scale(2);
      -webkit-transition: fill, -webkit-transform
   -moz-transition: fill, -webkit-transform
    -ms-transition: fill, -webkit-transform
     -o-transition: fill, -webkit-transform
        transition: fill, -webkit-transform
      -moz-transition-duration: 3s;
    -ms-transition-duration: 3s;
     -o-transition-duration: 3s;
        transition-duration: 3s;

HTML

<circle class="cirkel" cx="245.929" cy="68.256" r="5.08" onmouseover="evt.target.setAttribute('r', '10');" onmouseout="evt.target.setAttribute('r', '5.08');"/>

I removed the onmouseover and onmouseout attributes from first two circle tags. remove them and adjust scale accordingly

Upvotes: 3

Related Questions