Question

我已根据数据库数据创建了一个带有d3的svg，工作正常。但是当放大时，已经绘制的元素会超出svg。我想创建一个clippath以防止这种情况，这可以在Chrome和Safari中使用，但在Firefox中出现问题：

clip-path属性应用于<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>，这没有任何区别。

有什么想法吗？

我会尝试设置一个小提琴，以防它有所帮助。

Answer 1

似乎我想通了。我不确定原因，但clip-path似乎只在Firefox中作为元素属性（与样式属性相比） - 至少对于我的SVG元素。

即，当我从

更改它时它会起作用

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

类似

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

剪辑路径在Chrome和Safari中运行，但不适用于Firefox

1 个答案: