Style SVG circle with CSS - 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

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 2

As per the SVG 1.1 specification you can't style the r attribute of an SVG circle using CSS https://www.w3.org/TR/SVG/styling.html#SVGStylingProperties. But you can do:
<circle cx="168" cy="179" r="59"
fill="white" stroke="black"
onmouseover="evt.target.setAttribute('r', '72');"
onmouseout="evt.target.setAttribute('r', '59');"/>
In SVG 2, which is partially supported by some modern browsers, you can style the r attribute of circles using CSS. https://www.w3.org/TR/SVG2/styling.html#PresentationAttributes

Answer 3

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 4

As Phillip suggested in the comment above you can do this with CSS 3 transform.
circle:hover {
-webkit-transform: scale(x, y);
}
("-webkit" prefix is for Chrome only)
See https://developer.mozilla.org/en-US/docs/Web/CSS/transform
Here's a working example with CSS transitions too: http://jsbin.com/sozewiso/2

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

This should work for you.
jsfiddle
You need to manipulate the radius and this can only be done via javascript:
$(function () {
$("svg circle").on("mouseenter", function () {
var oldR = $(this).attr("r");
var newR = (((oldR*2)/100)*120)/2; // 120% width
$(this).attr("r", newR);
});
});

Answer 7

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>

Answer 8

You forgot the stroke color:
circle:hover {
stroke:white;
stroke-width:10px;
}

Answer 9

I was working on something else and came across this question. I'm doing something similar and using greensock. I animated the scale on a couple circles using Greensock, GSAP. I needed to animate tranformOrigin and the scale property:
TweenMax.staggerFrom(".circle",1,{scale:0,transformOrigin:"50% 50%",ease:Bounce.easeOut}, .08);
Example
https://codepen.io/grmdgs/pen/RgjdPv
Greensock
https://greensock.com/

Answer 10

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

Answer 11

Using JQUERY:
$(function () {
$('circle').hover(function() {
$(this).attr('r', 100);
}, function() {
$(this).attr('r', 59);
});
});
Demo Here