Javascript SVG剪辑路径在Chrome中有效，但在Firefox或Safari中无效

我正在用D3绘制一个相当复杂的折线图。它使用刷子放大数据（用作灵感）

虽然它在Chrome中工作得很好，但图表线忽略了Firefox和Safari中使用clip path（见附图）指定的边框，我不知道为什么

CSS:

clip-path: url(#mainChartClip);

// Clip = borders the canvas for zoom
svg.append('defs')
   .append('clipPath')
   .attr('id', 'mainChartClip')
   .append('rect')
   .attr('width', width)
   .attr('height', height)
   .attr('transform', 'translate(0,-10)');

JS:

clip-path: url(#mainChartClip);

// Clip = borders the canvas for zoom
svg.append('defs')
   .append('clipPath')
   .attr('id', 'mainChartClip')
   .append('rect')
   .attr('width', width)
   .attr('height', height)
   .attr('transform', 'translate(0,-10)');

以下是完整的代码：

一件奇怪的事：codepen实际上可以在Firefox和Safari中使用。这可能与它使用的iframe有关吗？

我已经隔离了图表代码，以100%确保它不会受到其他代码的影响，但当我在Firefox或Safari中使用codepen之外的代码时，它不起作用

实际上是

clip-path: url(<this file>#mainChartClip);

不幸的是，Chrome出错了（这就是你的代码在那里工作的原因）。他们可能会在某一天修复它，此时您的代码将停止工作

据我所知，Safari不支持外部clipPath，这意味着您的clipPath需要在使用它的文件中定义。也就是说，将其保留在CSS文件中并按上述方式进行更改可能不会为您解决问题

---

Firefox确实支持外部ClipPath，但它遵循CSS规范中规定的规则，因此您的标记在那里不起作用。

CSS剪辑路径是什么：url（#mainChartClip）；什么意思？这是不是意味着你有一个单独的CSS文件？是的，我有一个CSS文件。非常感谢罗伯特的解释！