css - 如何将SVG中的foreignObject元素带到顶层？

Question

我有一个定制版的D3 based family tree .唯一的区别是，我没有使用 rect 节点，而是选择使用 foreignObject。

我希望 foreignObjects 位于其他路径层的顶部，这样它们就不会重叠，但是正如您从下面链接的示例代码中看到的那样，我们仍然可以在 html 元素上方看到路径线。 基于谷歌搜索，我尝试的事情是更改文档顺序、select("selector").raise()、设置 z-index 和 block 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;
    });

Answer 1

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

.node {
    background: white;
}

这是你的 JSFiddle 的变化:http://jsfiddle.net/jsoLg0n3/