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

Question

我正在用 D3 绘制一个相当复杂的折线图。它使用刷亮来放大数据(使用 http://bl.ocks.org/mbostock/1667367 作为灵感)。

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

CSS:

clip-path: url(#mainChartClip);

JS:

// 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)');

完整代码如下: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 不支持外部 clipPaths，这意味着您的 clipPath 需要在使用它的文件中定义。 IE。将它留在 CSS 文件中并按上述方式更改它可能不会为您解决问题。

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