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不支持外部clipPath,这意味着你的clipPath需要在使用它的文件中定义.即将它留在CSS文件中并按上述方式更改它可能不会为您解决问题.

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