Style SVG circle with CSS

css svg hover geometry

Sebastian · Jan 10, 2013 · Viewed 73.6k times · Source

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

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

Style SVG circle with CSS

Answer

Related questions