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

【问题标题】：SVG clip-path works in Chrome, but not in Firefox or SafariSVG 剪辑路径适用于 Chrome，但不适用于 Firefox 或 Safari
【发布时间】：2015-11-15 18:53:38
【问题描述】：

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

虽然它在 Chrome 中运行良好，但图表线忽略了在 Firefox 和 Safari 中使用剪辑路径（见附图）指定的边框，我不知道为什么。

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 之外的代码时它无法正常工作。

【问题讨论】：

什么是 CSS clip-path: url(#mainChartClip);意思是？这是否意味着您将其保存在单独的 CSS 文件中？
是的，我有一个 CSS 文件。

标签： javascript css d3.js svg

【解决方案1】：

clip-path: url(#mainChartClip);

其实是缩写

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

所以在一个不太可能指向任何有效内容的 CSS 文件中，因为您的 CSS 文件不包含 mainChartClip 元素。

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

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

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

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

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

【讨论】：

非常感谢罗伯特的解释！