Question

如何使SVG行显示在css样式元素的顶部。所以在我的html文件中，我使用d3在javascript中创建了一个svg白色背景。最重要的是，我将这些css风格化的矩形放入其中，然后在那些我希望放置svg行也在javascript中创建的svg行超过svg矩形。问题是线条一直出现在css矩形后面。有什么建议？我使用d3创建白色背景，如下所示：

var vizSVG = d3.select("#viz")
                    .append("svg:svg")
                    .attr("width",page_width)
                    .attr("height",page_height)

我在html样式元素中创建了css矩形，如下所示：

<style>
                rectangle{
                    border-radius: 8px;
                    width:20%;
                    height:32px;
                    text-indent:10px;
                    padding-top:20px;
                    padding-left:12px;
                    font-family: Courier, Bold, sans-serif;
                    font-size: 13px;
                    display: block;
                    }
</style>

最后我还要使用d3添加svg行，如下所示：

vizSVG.append("line")
    .attr("x1",0)
    .attr("y1",0)
    .attr("x2",1000)
    .attr("y2",1000)
    .style("stroke", "black")
    .style("stroke-width", 150)
    .attr("stroke-linecap","round");

有什么建议吗？

Answer 1

更改css代码中的z-index有帮助，虽然我必须找到如何更改svg标记的z-index以将正确的元素放在顶部。感谢那些回答

的人

但丁

如何在CSS样式上添加SVG行

1 个答案: