时间戳

首页 > 解决方案 > 如何将SVG中的foreignObject元素带到顶层？

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

问题描述

我有一个基于 D3 的家庭树的定制版本。唯一的区别是，我选择使用foreignObject，而不是使用矩形节点。

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

示例代码

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;
    });

标签： cssd3.jssvg

解决方案

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

.node {
    background: white;
}

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

推荐阅读