Question

所以我有我的SVG圈子。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="168" cy="179" r="59" fill="white" />
</svg>

我希望将其悬停在圆圈上时为120％。我尝试了宽度，高度和中风。没有找到任何解决方案，以便在悬停时使圆圈更大。有什么建议吗？

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

circle:hover
  {
    height: 120%;
    width: 120%;
  }

Answer 1

根据SVG 1.1规范，您无法使用CSS https://www.w3.org/TR/SVG/styling.html#SVGStylingProperties设置SVG圈的r属性。但你可以这样做：

<circle cx="168" cy="179" r="59"
        fill="white" stroke="black"
        onmouseover="evt.target.setAttribute('r', '72');"
        onmouseout="evt.target.setAttribute('r', '59');"/>

在某些现代浏览器部分支持的SVG 2中，您可以使用CSS设置圆圈的r属性的样式。 https://www.w3.org/TR/SVG2/styling.html#PresentationAttributes

Answer 2

想只使用CSS？使用line代替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/

Answer 3

不确定此人是否仍在寻找答案，但对于其他任何人来说，可以通过将圆的变换原点设置为其中心来在CSS（3）中完成。

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

}

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

CSS的警告现在与尺寸相结合，我们必须知道SVG中圆的确切中心。

Answer 4

正如Phillip在上面的评论中所建议的，您可以使用CSS 3转换。

  circle:hover {
    -webkit-transform: scale(x, y);
  }

（＆＃34; -webkit＆＃34;前缀仅适用于Chrome）

请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/transform

以下是CSS转换的工作示例：http://jsbin.com/sozewiso/2

Answer 5

这应该适合你。

jsfiddle

您需要操纵半径，这只能通过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);

    });
});

Answer 6

使用此：

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

Demo Here

Answer 7

我不确定，但你不能只用css完全定制一个svg。但是，如果你这样做，将不会跨浏览器。在过去，我使用svg来创建复杂的地图，对我来说解决方案是rapheljs。

编辑：

使用@phonicx微积分进行半径修改代码，something能够自定义每个圆圈（如果你有更多的话）：

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

Answer 8

你忘记了笔触颜色：

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

Answer 9

我正在研究其他事情并遇到了这个问题。我正在做类似的事情和使用greensock。我使用Greensock，GSAP对几个圆圈的比例进行了动画制作。我需要为tranformOrigin和scale属性设置动画：

TweenMax.staggerFrom(".circle",1,{scale:0,transformOrigin:"50% 50%",ease:Bounce.easeOut}, .08);

实施例 https://codepen.io/grmdgs/pen/RgjdPv

使用GreenSock https://greensock.com/

Answer 10

如果要缩放比例，请尝试使用transform: scale(1,5)，因此您无需更改cx，cy，r属性。

Answer 11

点击“运行代码段”进行测试：

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

我偶然发现了该页面，但想添加自己认为最简单的答案。显然，它在Firefox中不起作用，这就是为什么有人低票的原因。

第1步：将一个类（例如“ myCircle”）添加到您的圈子

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle class="myCircle" cx="168" cy="179" r="59" fill="white" />
</svg>

步骤2：在CSS文件中，您可以将“ r”用作CSS属性！

.myCircle:hover {
  r: 100;
}

第3步（可选）：：随意添加过渡以使半径平滑增长：

.myCircle {
    transition: all 1s;
}

使用CSS样式SVG圈

11 个答案: