Style SVG circle with CSS

Question

So I have my SVG-circle.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="168" cy="179" r="59" fill="white" />
</svg>

I want it to be 120% when one hover the circle. I tried both with width, height and stroke. Haven't find any solution to make the circle bigger when hovering. Any suggestions?

circle:hover
  {
    stroke-width:10px;
  }

circle:hover
  {
    height: 120%;
    width: 120%;
  }

Answer 1

You forgot the stroke color:

circle:hover {
    stroke:white;
    stroke-width:10px;
 }

Answer 2

Want to only use CSS? Use line instead of circle.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <style>
    .circle {
        stroke-width: 59;
        stroke-linecap: round;
    }
    .circle:hover {
        stroke-width: 71;
    }
    </style>
    <line x1="168" y1="179" x2="168" y2="179" stroke="white" class="circle" />
</svg>

http://jsfiddle.net/rLk7rd8b/

Answer 3

Use this :

$(function () {
$('circle').hover(function () {
$(this).attr('r',100);
},function(){
$(this).attr('r',59);
});
});

Demo Here

Answer 4

I am not sure, but you can not full custom a svg only with css. However, if you will do it won't be cross browser. In the past I used svg for creating a complex map and for me the solution was rapheljs.

EDIT:

Using @phonicx calculus for radius i modified the code, having something which is able to customize each circle ( in case if you have more ) :

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle data-precentage='100' cx="168" cy="179" r="59" fill="red" />
   <circle data-precentage='120' cx="74" cy="100" r="59" fill="black" /> 
</svg>