Safari浏览器中D3.js Ribbon路径元素无法响应hover事件的问题求助

我在Safari浏览器中使用D3.js实现丝带图（ribbon）时遇到了一个奇怪的问题：部分SVG路径元素完全不响应hover事件的样式修改。这个hover变色的效果在Chrome和Firefox里都能完美生效，但到了Safari中，有些路径就像是完全忽略了鼠标交互一样。

我已经尝试了所有可选的pointer-events属性值（包括all、auto、visiblePainted等），但问题依然存在。同时我也确认了以下几点：

• 所有路径都能正常渲染且清晰可见
• 没有其他重叠的元素遮挡住这些路径
• hover效果是通过D3的.on("mouseover", ...)方法进行绑定的

以下是我绘制路径的具体代码实现：

// Dimensions and container setup
const width = 600, height = 600;
const svg = d3.select("#circos-plot")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", `translate(${width / 2},${height / 2})`);

// Updated data with new angles
const data = {
    source: { radius: 200, startAngle: 0.10082134423424959, endAngle: 0.23383773956851167 },
    target: { radius: 200, startAngle: 1.0174690537411528, endAngle: 1.0615254394569593 }
};

// Ribbon generator
const ribbon = d3.ribbon().radius(data.source.radius);

// Append ribbon with hover event
svg.append("path")
    .datum(data)
    .attr("d", ribbon)
    .attr("fill", "steelblue")
    .attr("class", "ribbon")  // Add class for hover styling
    .style("pointer-events", "visibleFill")  // Ensure pointer events work
    .on("mouseover", function(event, d) {
      // Change color on hover
      d3.select(this).transition().duration(300).attr("fill", "orange");
    })
    .on("mouseout", function(event) {
      // Reset color when mouse leaves
      d3.select(this).transition().duration(300).attr("fill", "steelblue");
    });

我准备了完整的可运行示例，还有一个GIF可以直观展示这个bug的表现。

请问有没有什么特定的代码调整或者适配方案，能让SVG在Safari中的交互表现和其他主流浏览器保持一致呢？

备注：内容来源于stack exchange，提问作者joko3ono