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

【问题标题】：Clip-path working in Chrome and Safari but not Firefox剪辑路径适用于 Chrome 和 Safari，但不适用于 Firefox
【发布时间】：2015-08-15 12:01:19
【问题描述】：

我已经根据 db 数据创建了一个带有 d3 的 svg，效果很好。但是在放大时，已绘制的元素超出了 svg。我想创建一个剪贴路径来防止这种情况，它适用于 Chrome 和 Safari，但在 Firefox 中事情变得很奇怪：

clip-path 属性应用于<g> 的子元素（使用url(#[id of <clippath>]) 值）。当我在 Firefox 中使用 Inspector 在此级别手动应用相同的剪辑路径属性时，它似乎工作正常，但由于某种原因它没有从我的样式表中读取它。（另外，请注意，Firefox 确实识别出应用于样式表中元素的属性 - 它没有将其划掉或其他任何东西 - 它似乎并不在意！）

我不能改用溢出属性，因为其他原因我需要它可见。

我的 CSS：

#sectionID g.groupClass1 elements,
#sectionID g.groupClass2 elements,{
    clip-path: url(#clip);
}

我的 JS：

svgSelector.append("defs").append("clipPath")
.attr("id","clip")
.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", 500)
.attr("height", 500);

我也尝试过不使用<defs>，但没有任何区别。

有什么想法吗？

如果有帮助，我也会尝试设置小提琴。

【问题讨论】：

标签： javascript css firefox clip-path

【解决方案1】：

看来我想通了。我不知道为什么，但clip-path 似乎只在 Firefox 中作为元素属性（与样式属性相比） - 至少对于我的 SVG 元素。

也就是说，当我从

更改它时它可以工作

<g style="clip-path:url(#clip)">

类似

<g clip-path="url(#clip)">

【讨论】：