Style SVG circle with CSS

Question

So I have my SVG-circle.

Answer 1

It can be done in CSS(3), by setting the transform-origin of the circle to its center and then using scale transformation:

circle {
  transform-origin: center center;
}

circle:hover {
  stroke-width: 10px;
  transform:scale(1.2, 1.2);
}

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

Using javascript:

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

Demo Here

Answer 4

You forgot the stroke color:

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

Answer 5

Click "Run code snippet" to test it out:

.myCircle:hover {
  r: 20
}

.myCircle {
  transition: ease 1s
}

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
       <circle class="myCircle" cx="10" cy="10" r="5" fill="black" />
    </svg>

I stumbled across this page but wanted to add my own answer that I think is easiest. Apparently it doesn't work in Firefox though, which is why someone downvoted.

Step 1: Add a class (e.g. "myCircle") to your circle

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

Step 2: In your CSS file you can use "r" as a CSS property!

.myCircle:hover {
  r: 100;
}

Step 3 (optional): Feel free to add a transition to make the radius grow smoothly:

.myCircle {
    transition: all 1s;
}

Answer 6

If you want to scale it, try with transform: scale(1,5), so you don't need to change cx,cy,r attributes.