SVG：形狀上的文本禁用背景形狀上的動畫

Question

正如我在this小提琴中演示的，我希望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>