SVG剪辑路径适用于Chrome，但不适用于Firefox或Safari

Question

我用D3绘制了一个相当复杂的折线图。它使用刷子来缩放数据（使用http://bl.ocks.org/mbostock/1667367作为灵感）。

虽然它在Chrome中运行得非常好，但图表行忽略了在Firefox和Safari中使用clip-path指定的边框（参见附图），我不知道为什么。

CSS：

db.tasks.aggregate([{$group:{_id:"",avgnum: {$avg: "$num"}}}])

JS：

clip-path: url(#mainChartClip);

以下是完整代码：http://codepen.io/anon/pen/RPzeWr

奇怪的是：codepen实际上适用于Firefox和Safari。这可能与它使用的iframe有关吗？

我已经隔离了图表代码，以便100％确定它不会影响其他一些代码，但是当我在Firefox或Safari中使用codepen之外的代码时，它无法正常工作。

Answer 1

clip-path: url(#mainChartClip);

实际上是

的缩写

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

因此在CSS文件中，由于CSS文件不包含mainChartClip元素，因此不太可能指向任何有效内容。

您需要将URL指向更改为html文件，例如

clip-path: url(main.html#mainChartClip);

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

据我所知，Safari不支持外部clipPath，这意味着你的clipPath需要在使用它的文件中定义。即将它保留在CSS文件中并按上述方式更改它可能无法解决问题。

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