Chrome中SVG设置overflow:visible时JS移图形到域外后hover事件失效

这个异常是Chrome浏览器针对SVG元素的 命中区域计算缓存逻辑缺陷 导致的，和overflow: visible的视觉渲染逻辑完全独立：

• 浏览器初次解析页面DOM时，会根据SVG元素初始的默认布局边界（也就是未设置溢出时的裁剪矩形范围），预先为整块SVG计算固定的鼠标事件命中盒。当圆形初始坐标落在SVG边界内部时，这块命中盒的范围和SVG的默认布局大小一致，完全覆盖圆形的初始位置。
• 当你后续通过JavaScript动态修改圆形的cx/cy属性，将其移动到SVG边界外时，虽然overflow: visible的设置会让圆形正常完成视觉渲染，但Chrome不会针对这次子元素的位置变动，重新计算整块SVG的事件命中范围，始终沿用初次解析时生成的旧命中边界。鼠标移动到溢出区域的圆形上时，由于位置不在旧的命中盒范围内，浏览器根本不会将对应位置的鼠标事件匹配到圆形元素上，自然无法触发:hover样式。
• 对比测试里的现象：直接在源码中把圆形的初始坐标设为溢出位置时，Chrome初次解析DOM就识别到圆形在SVG边界外，计算初始命中盒的时候就会把圆形的实际位置纳入范围，不存在旧缓存边界的问题，因此hover可以正常触发。
• 测试里的两种按钮操作（通过setAttribute改属性、直接修改style.cy内联样式）失效效果一致，是因为不管用哪种方式做动态位置修改，都只触发视觉层的重绘，不会触发SVG层面的命中盒重算，因此都会出现视觉可见但事件不响应的问题。

• 动态修改位置后强制触发SVG命中盒重算
  在完成圆形的坐标修改后，对SVG元素做一个不影响视觉效果的微小样式改动，就能强制Chrome重新计算整块SVG的事件命中范围。比如修改完坐标后执行svg.style.overflow = 'visible'（和原有样式完全一致的赋值即可触发重算），或是临时给SVG加一个0px的边框再移除，都能让溢出的圆形重新恢复hover响应。
• 预先通过viewBox声明覆盖所有元素位置的可视范围
  不要让SVG使用默认的视口裁剪逻辑，直接通过viewBox参数把所有可能出现的子元素位置都纳入SVG的声明可视边界。比如已知圆形会被移动到cy=-20的位置，直接给SVG设置viewBox="-30 -40 100 100"，从初始解析阶段就让Chrome把后续要用到的溢出区域纳入命中范围，从根源上避免旧边界缓存的问题。
• 给目标圆形手动设置明确的事件匹配规则
  部分场景下，可以给圆形元素添加pointer-events: visiblePainted的明确声明，避免Chrome对溢出元素的事件匹配做默认裁剪，不过这个方法对不同版本Chrome的兼容性弱于前两种方案，仅作为应急方案使用。

内容的提问来源于stack exchange，提问作者JacquesB