Javascript d3嵌套SVG在firefox中的绘图方式与在Chrome中不同

我见过这个问题的不同版本，但它们并没有帮助我解决这个问题。我将d3与嵌套的svg一起使用，下面是代码：

var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);

var nestedSVG = svg.append('svg') 
        .attr("width", innerWidth)
        .attr("height", innerHeight)
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

---

nestedSVG生成一个内部高度/宽度，以便适当地截断某些绘图。这在firefox中非常有效，但在Chrome中却不行。当我在firebug中滚动nestedSVG时，它会显示相应的维度，但当我在chrome的javascript控制台中滚动nestedSVG时，维度会发生变化。这导致绘图不同。关于为什么会发生这种情况，有什么线索吗？

在

元素上设置转换的功能在SVG 2中是新的，目前尚未得到广泛支持。Firefox确实支持它，即目前不支持，也不确定其他UAs。

宽度/高度/内部宽度/内部高度分配给什么？这可能是一个百分比问题。宽度=960，高度=570，内部宽度=860，内部高度=570，margin.left=50，margin.top=20看起来你的内部高度+margin.top可能超过你的高度？解决了。我没有使用translate作为attr，而是像这样附加它：nestedSVG=nestedSVG.append（“g”）.attr（“transform”、“translate”（+margin.left+），“+margin.top+”）；--没有直接在“g”元素上应用转换。感谢您的帮助，我意识到我可能没有在OP中输入足够的信息。在SVG 2中，在

元素上设置转换的功能是新的，目前尚未得到广泛支持。Firefox确实支持它，即目前不支持，也不确定其他UAs。事实上，我仍然很难找到解决方案，如果元素不能指定内部高度/宽度来切断内部尺寸以外的所有绘图，如何切断元素。转换g元素时，它们仍然存在于外部维度。也许我应该问一个新问题。感谢您提供的信息。SVG2规范没有对其进行足够详细的定义，但希望很快就会实现。有关当前未定义的某些内容，请参见。