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

Question

我已经根据数据库数据用 d3 创建了一个 svg，效果很好。但是当放大时，绘制的元素超出了 svg。我想创建一个 clippath 来防止这种情况，这在 Chrome 和 Safari 中有效，但在 Firefox 中情况变得奇怪:

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

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

我的 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> , 这没有区别。

有什么想法吗？

如果有帮助，我也会尝试设置一个 fiddle 。

Answer 1

我好像明白了。我不确定为什么，但是 clip-path 在 Firefox 中似乎只作为元素属性(与样式属性相比)工作——至少对于我的 SVG 元素。

即，当我从

更改它时它会起作用

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

类似于

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