D3.js：当用户使用Safari浏览器时，不应用SVG剪切路径

Question

我目前正在绘制区域图（连同单个折线图和在同一图形区域上的散点图）。

在chrome上，它看起来非常好，因为面积图不会超出轴范围。

但是，在Safari（移动版和台式机）上，似乎没有应用剪切路径，因为显示了整个面积图，并且未“剪切”。

这是涉及clip-path和面积图渲染的相关代码。即使渲染了<clipPath>元素，后续元素似乎也没有注册来自剪切路径的效果。

const ciClip = svg.append('defs').append('clipPath')
  .attr('id', 'ciClip')
  .append('rect')
  .attr('width', width)
  .attr('height', height)
  .attr('x', 0)
  .attr('y', 0);

svg.append('g')
  .attr('clip-path', 'url(#ciClip)')
  .append('path')
  .datum(ciData)
  .attr('class', 'area')
  .attr('d', area)
  .style('fill', '#D2E6FF')
  .style('opacity', .2);

我尝试了以下方法：

1）Why doesn't CSS clip-path with SVG work in Safari?

2）SVG Clip-Path not working on Safari

不幸的是，他们不能解决我的问题。

有趣的是，这不是我第一次使用剪切路径，而且我还没有遇到任何跨浏览器的问题。还有其他人遇到过类似的问题并成功解决了吗？我很想学习如何解决这个特定问题。非常感谢。

如果这很重要的话，我目前正在D3.js v5.9.2和Angular上使用（不确定是否可能是由于Angular的封装所致）。

P.S。我可以尝试重现演示。如果出于测试目的，我将尝试生成一个最低版本。