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%;
  }

Solution 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

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

Solution 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);
}

Solution 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

Solution 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;
}

View more solutions

Comments

[Milind Anantwar]

It won't go to original size on mouseleave

[Erik Dahlström]

onmouseover="this.setAttribute('r', '72'); should work fine as well

[Sebastian]

Great solution. Even if it wasn't with CSS. Thanks!

[manafi]

Yes, just add the code to restore the old radius on mouseleave, and this is a great answer.

[stofl]

+1 Great answer! I added width="300" height="300" to the <svg> tag to be able to see anything. Of course you cannot draw outlines of the circle this way.

[rummik]

According to caniuse.com/#search=transform, most vendors have dropped the prefixes. The exception (at the time of writing) being Safari, which still uses -webkit

[Fanky]

The right answer for 2016 seems to be the one by Anshul

[Fanky]

Yes! Plus prefixes to have it cross-browser (-o-transform-origin, -webkit-transform-origin, -moz-transform-origin, -o-transform, -webkit-transform, -moz-transform)

[Ben]

Not quite circular in my experiments. :(

[Ben]

Tried this solution but it was buggy in Chrome. Sometimes it would work, sometimes the circle would be just an outline.

[Ben]

Slightly different situation but it worked for me to do the origin as 50% 50% and to transition from scale(0,0) to scale(1,1). Centered and still not specifying an absolute size.

[interestinglythere]

Here's what I see, it looks pretty circular to me. i.imgur.com/cKX9n3a.png @Ben, what browser are you using?

[Paweł Gościcki]

Latest Firefox (74) does not support styling the r attribute via CSS. Says "Invalid property value".

[Nic Scozzaro]

@PawełGościcki, so in FireFox you don't see the black dot when you run the code snippet above?

[Paweł Gościcki]

I see the black dot, but the :hover effect doesn't work.

[Oleksandr Oliynyk]

thanks! Simple and elegant approach, helped me a lot!

[Trade-Ideas Philip]

How to draw a circle pre-SVG: Draw a div with 0 width and 0 height and a border of length r and a border radius of r. SVG to the rescue. Now we draw a line of length 0... 😆

[Corrl]

According to this answer non-zero css values must have units. If you add 'px' it's working (in Chrome 95 & Firefox 93) and according to MDN "Starting with SVG2, r is a Geometry Property meaning this attribute can also be used as a CSS property for circles." Unfortunately didn't find any concrete information on good browser support already is at the moment...

[user2101068]

Chrome doesn't seem to recognize 'r' at all regardless of whether you 'px'.

[Nic Scozzaro]

I'm on Chrome Version 99.0.4844.83 (Official Build) (x86_64) on a Mac and the snippet above works.