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

Question

正如我在 this fiddle 中演示的那样，我希望 SVG Cirlce 在悬停在其上时放大。但与此同时，我想在圆圈上写一些文字（例如 fiddle、"Hello" 和 "World"）。

我希望对于用户来说，文本和圆圈应该看起来像是同一个实体。并且一直 he/she 将光标放在圆上，圆应该保持放大。

请运行快速演示：

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 的解决方案也可以。请用你的解决方案 fork fiddle 以便我更好地理解它:) :)

Answer 1

使用pointer-events: none使文本元素"transparent"悬停。

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>

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

SVG: text over a shape disables animation on background shape

svg

svg-animate