Question

正如我在this小提琴中所展示的那样，我希望SVG Cirlce在悬停在它上面时放大。但与此同时，我想在圆圈上写一些文字（例如，在小提琴中，＆＃34; Hello＆＃34;＆＃34; World＆＃34;）。

我想要用户，文字和圈子应该看起来好像是同一个实体。并且他/她一直将光标放在圆圈上，圆圈应该保持放大。

请运行快速演示：

＆＃13;

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

＆＃13;

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

＆＃13;

但我面临的问题是，当我们将文字悬停时，＆＃39; circle.mouseout＆＃39;触发动画，并将悬停在圆圈上方的动画结束。当我们从文本部分悬停到圆形部分（视觉上仍然在圆圈内）时，动画为“圆圈”。重启。

我已尝试过第三个解决方案（橙色圆圈） - 将鼠标悬停在文字上会调整圆圈的大小，但这不会产生预期效果。

请帮忙。使用CSS / JS的解决方案也可以。请用你的解决方案来解决问题，这样我就能更好地理解:) :)

Answer 1

使用pointer-events: none制作文字元素＆＃34;透明＆＃34;你的徘徊。

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: