如何将SVG中的foreignObject元素带到顶层？答案

【问题标题】：How to bring foreignObject elements in SVG to the top layer?如何将SVG中的foreignObject元素带到顶层？
【发布时间】：2019-09-09 17:04:45
【问题描述】：

我有一个自定义版本的D3 based family tree。唯一的区别是，我选择使用foreignObject，而不是使用矩形节点。

我希望 foreignObjects 位于其他路径层的顶部，这样它们就不会重叠，但是正如您从下面链接的示例代码中看到的那样，我们仍然可以看到 html 元素上方的路径线。根据谷歌搜索，我尝试更改文档顺序、select("selector").raise()、设置 z-index 和在 css 上阻止内联表示法，但没有任何改变。任何人都可以帮助解决这个问题。

sample code

nodes.append("foreignObject")
    .attr("display", function(d) {
        if (d.hidden) {
            return "none";
        } else {
            return "";
        }
    })
    .attr("width", 50)
    .attr("height", 100)
    .attr("x", kx)
    .attr("y", ky)
    .append("xhtml:div")
    .attr("class", "node")
    .append("text")
    .text(function(d) {
        return d.name;
    })
    .attr("id", function(d) {
        return d.id;
    });

【问题讨论】：

标签： css d3.js svg

【解决方案1】：

这里的问题与 z 索引或元素的顺序无关。问题是您没有填写<div>s：您在CSS中使用fill，但填写<div>的正确方法是使用background-colour或background：

.node {
    background: white;
}

这是您的 JSFiddle 与该更改：http://jsfiddle.net/jsoLg0n3/

【讨论】：