将鼠标悬停在 SVG 元素之外的 SVG 形状

Question

我在 Chrome 中有一个奇怪的问题。我有一个带有 overflow: visible 的 svg 元素。它包含一个圆圈。如果我以编程方式更改圆圈上的 cx/cy 以将其移动到 svg 元素之外，它仍会显示，但是鼠标事件（如悬停）似乎未注册。

奇怪的是，如果圆最初设置为相同的坐标，悬停工作正常。仅当通过 JavaScript 更改坐标时才会丢失悬停。

这是一个最小的例子：

<style>

svg { overflow: visible; }

.test-dot {
    stroke: green;
    stroke-width: 10;
}

.test-dot:hover {
    stroke: red;
}

</style>
<div style="margin-top:100px;">
<svg style="border:solid black 1px;">
<circle id="test-dot" cx="20" cy="20" r="4" class="test-dot"></circle>
</svg>
</div>
<button onclick="document.getElementById('test-dot').setAttribute('cy', -20)">Move up</button>
<button onclick="document.getElementById('test-dot').style.cy = -20">Move up (css)</button>

圆圈最初响应悬停，但单击其中一个按钮，它移动并停止响应悬停。但是如果 cy 在源代码中而不是通过 JavaScript 进行更改，它仍然可以响应悬停。