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

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 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/