SVG:形状上的文本禁用背景形状上的动画

Question

正如我在这个小提琴中所演示的，我希望SVG Cirlce在悬停在它上面时放大。但与此同时，我想在圆圈上写一些文字（例如，在小提琴中，"你好"和"世界"）。

我希望对于用户，文本和圆圈应该看起来好像它们是同一个实体。并且当他/她将光标放在圆圈上时，圆圈应该保持放大。

请运行快速演示：

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的解决方案也可以。请用您的解决方案分叉小提琴，以便我更好地理解它:) :)

Answer 1

使用pointer-events: none使文本元素对悬停"透明"。

div,
svg {
  background-color: grey;
  height: 100px;
  width: 600px;
}
text {
  pointer-events: none;
}

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