如何在 CSS 样式上添加 SVG 线答案

【问题标题】：How do I add an SVG line over a css style如何在 CSS 样式上添加 SVG 线
【发布时间】：2013-08-24 12:25:20
【问题描述】：

如何使 SVG 线条出现在 css 样式元素的顶部。因此，在我的 html 文件中，我使用 d3 在 javascript 中创建了一个 svg 白色背景。最重要的是，我放入了这些 css 风格化的矩形，然后在那些我想放置 svg 线的顶部，这些线也在 javascript 中创建，越过 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");

有什么建议吗？

【问题讨论】：

您需要按照您希望它们出现的顺序附加元素，先返回元素。
我做到了，我在创建css矩形后最后在javascript标签内添加了line元素，但线条出现在矩形后面。有什么我可以做的涉及 appendChild 以确保线路排在最前面。
我也尝试将线条附加到矩形本身，但它们没有出现在顶部，是因为它们是在 css 中创建的吗？
啊，好吧，你的矩形是 HTML 而不是 SVG？在这种情况下，没有办法——就 HTML 而言，SVG 是一层。您可以将其拆分为单独的 SVG 或在 SVG 中绘制矩形。
style标签里面的代码不是css而是html？将其拆分为单独的 SVG 是什么意思？此外，是否可以将一个图层附加在另一个图层之上或影响图层的显示顺序？

标签： javascript html css svg d3.js

【解决方案1】：

更改 css 代码中的 z-index 有所帮助，尽管我必须找出如何更改我的 svg 标签的 z-index 以将正确的元素放在顶部。感谢那些回答的人

但丁

【讨论】：

SVG 没有 z-index 的概念。