【发布时间】：2016-02-18 13:46:55
【问题描述】：
正如我在this fiddle 中演示的那样，我希望 SVG 圆在悬停在它上面时放大。但同时，我想在圆圈上写一些文字（例如，在小提琴中，“Hello”和“World”）。
我希望对用户来说，文本和圆圈看起来应该是同一个实体。并且他/她一直将光标悬停在圆圈上，圆圈应该保持放大。
请运行快速演示：
div,
svg {
background-color: grey;
height: 100px;
width: 600px;
}<h1> test </h1>
<div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle id="C10" cx="50" cy="50" r="35" fill="red">Red</circle>
<animate xlink:href="#C10" attributeName="r" dur="0.2s" values="35;45;42" keyTimes="0;0.75;1" begin="mouseover" calcMode="linear" fill="freeze" />
<animate xlink:href="#C10" attributeName="r" dur="0.1s" values="42;35" keyTimes="0;1" begin="mouseout" calcMode="linear" fill="freeze" />
<circle id="C11" cx="150" cy="50" r="35" fill="green">Green</circle>
<animate xlink:href="#C11" attributeName="r" dur="0.2s" values="35;45;42" keyTimes="0;0.75;1" begin="mouseover" calcMode="linear" fill="freeze" />
<animate xlink:href="#C11" attributeName="r" dur="0.1s" values="42;35" keyTimes="0;1" begin="mouseout" calcMode="linear" fill="freeze" />
<text x="150" y="53" text-anchor="middle" font-family="Verdana" font-size="18" fill="white">Hello</text>
<circle id="C12" cx="250" cy="50" r="35" fill="orange"></circle>
<animate xlink:href="#C12" attributeName="r" dur="0.2s" values="35;45;42" keyTimes="0;0.75;1" begin="mouseover" calcMode="linear" fill="freeze" />
<animate xlink:href="#C12" attributeName="r" dur="0.1s" values="42;35" keyTimes="0;1" begin="mouseout" calcMode="linear" fill="freeze" />
<text id="T12" x="250" y="53" text-anchor="middle" font-family="Verdana" font-size="18" fill="white">World</text>
<set xlink:href="#C12" attributeName="r" to="42" begin="T12.mouseover" />
</svg>
</div>但我面临的问题是，当我们将文本悬停时，会触发“circle.mouseout”动画，并且为悬停在圆圈上编写的动画结束。当我们从文本部分悬停到圆圈部分时（视觉上仍然在圆圈内），'circle.mouseover' 的动画会重新启动。
我已经尝试了第三个（橙色圆圈）的解决方案 - 将鼠标悬停在文本上会调整圆圈的大小，但这并没有给出预期的结果。
请帮忙。使用 CSS / JS 的解决方案也可以。请用您的解决方案分叉，以便我更好地理解它:) :)
【问题讨论】：
标签： svg svg-animate