Style SVG circle with CSS

问题:

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

回答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

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

回答3:

Not sure if the person is still looking for the answers, but for anyone else, it can be done in CSS(3), by setting the transform-origin of the circle to its center.

circle {
  transform-origin: 168px 179px;
  transform: scale(1,1);

}

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

The caveat being CSS is now coupled with dimensions and we have to know the exact center of the circle in the SVG.

回答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

回答5:

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

    });
});

回答6:

Use this :

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

Demo Here

回答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>

回答8:

You forgot the stroke color:

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

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

回答10:

I stumbled across this page but wanted to add my own answer that I think is easiest!

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

Here's a snippet showing it in action:

.myCircle:hover {
  r: 10
}

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