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

don't know if it exists for svg, but what about css3 transform? — philipp, Jan 10 '13 at 10:33
+1 for css transform, stroke didn't worked in the OP example because he didn't defined a `stroke` color. Use the same color as the circle fill and it will look "bigger". — cvsguimaraes, Feb 24 '17 at 15:00

interestinglythere · Answer 1 · 2015-04-19T02:52:20.710

41

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/

edited Apr 19 '15 at 02:52

answered Jul 03 '13 at 23:46

interestinglythere

1,230
13
16

2

+1 Great answer! I added `width="300" height="300"` to the ` – stofl Aug 26 '13 at 10:17
Not quite circular in my experiments. :( – Ben Nov 03 '16 at 21:37
Here's what I see, it looks pretty circular to me. http://i.imgur.com/cKX9n3a.png @Ben, what browser are you using? – interestinglythere Nov 03 '16 at 22:23
1

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... – Trade-Ideas Philip May 06 '21 at 15:37

score 38 · Accepted Answer · edited Feb 21 '16 at 12:47

38

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

edited Feb 21 '16 at 12:47

gkunz

1,375
10
7

answered Jan 10 '13 at 12:36

Peter Collingridge

10,849
3
44
61

5

`onmouseover="this.setAttribute('r', '72');` should work fine as well – Erik Dahlström Jan 10 '13 at 12:39
Great solution. Even if it wasn't with CSS. Thanks! – Sebastian Jan 10 '13 at 13:33
2

The right answer for 2016 seems to be the one by Anshul – Fanky Sep 08 '16 at 15:42

score 30 · Answer 3 · edited Mar 20 '20 at 11:56

30

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

edited Mar 20 '20 at 11:56

Paweł Gościcki

9,066
5
70
81

answered Oct 31 '14 at 14:51

Anshul

746
9
22

Yes! Plus prefixes to have it cross-browser (-o-transform-origin, -webkit-transform-origin, -moz-transform-origin, -o-transform, -webkit-transform, -moz-transform) – Fanky Sep 08 '16 at 15:45
1

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. – Ben Nov 03 '16 at 22:08
thanks! Simple and elegant approach, helped me a lot! – Oleksandr Oliynyk Feb 01 '21 at 23:28

score 6 · Answer 4 · answered May 09 '14 at 11:38

6

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

answered May 09 '14 at 11:38

Johnathan Sewell

739
10
26

According to http://caniuse.com/#search=transform, most vendors have dropped the prefixes. The exception (at the time of writing) being Safari, which still uses `-webkit` – rummik Feb 28 '15 at 03:10

Nic Scozzaro · Answer 5 · 2020-03-21T01:46:16.720

6

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

edited Mar 21 '20 at 01:46

answered Jan 16 '20 at 15:09

Nic Scozzaro

6,651
3
42
46

3

Latest Firefox (74) does not support styling the `r` attribute via CSS. Says "Invalid property value". – Paweł Gościcki Mar 19 '20 at 17:32
@PawełGościcki, so in FireFox you don't see the black dot when you run the code snippet above? – Nic Scozzaro Mar 20 '20 at 01:48
I see the black dot, but the `:hover` effect doesn't work. – Paweł Gościcki Mar 20 '20 at 11:55
According to [this answer](https://stackoverflow.com/a/69790400/15388872) non-zero css values must have units. If you add 'px' it's working (in Chrome 95 & Firefox 93) and according to [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/r) "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... – Corrl Nov 02 '21 at 21:21
1

Chrome doesn't seem to recognize 'r' at all regardless of whether you 'px'. – user2101068 Mar 28 '22 at 21:13
2

I'm on Chrome Version 99.0.4844.83 (Official Build) (x86_64) on a Mac and the snippet above works. – Nic Scozzaro Mar 28 '22 at 22:01

score 1 · Answer 6 · edited Jan 10 '13 at 10:42

1

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

    });
});

edited Jan 10 '13 at 10:42

Milind Anantwar

81,290
25
94
125

answered Jan 10 '13 at 10:40

phonicx

479
2
14

1

It won't go to original size on mouseleave – Milind Anantwar Jan 10 '13 at 10:53
Yes, just add the code to restore the old radius on mouseleave, and this is a great answer. – Chris Calo Jan 11 '13 at 12:11

stefanz · Answer 7 · 2013-01-10T12:16:32.603

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>

score 0 · Answer 8 · edited Oct 11 '21 at 09:32

0

Using JQUERY:

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

Demo Here

edited Oct 11 '21 at 09:32

AlexioVay

4,338
2
31
49

answered Jan 10 '13 at 10:42

Milind Anantwar

81,290
25
94
125

score 0 · Answer 9 · answered Jun 04 '14 at 14:45

0

You forgot the stroke color:

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

answered Jun 04 '14 at 14:45

Miguel Alejandro Fuentes Lopez

907
5
11

Tried this solution but it was buggy in Chrome. Sometimes it would work, sometimes the circle would be just an outline. – Ben Nov 03 '16 at 21:57

score 0 · Answer 10 · answered Jun 27 '17 at 22:22

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/

score 0 · Answer 11 · answered Apr 19 '20 at 21:54

0

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

answered Apr 19 '20 at 21:54

Vasyl Gutnyk

4,813
2
34
37

Style SVG circle with CSS

11 Answers11

Linked