Is there a way to make SVG lines appear on top of CSS-styled elements in my HTML file? I have a white background SVG created with JavaScript using d3, and I am adding CSS-styled rectangles on top of it. However, I also want SVG lines (created with JavaScript) to go over these rectangles but they keep appearing behind them. Any advice on how to solve this issue? Here's how I create the white background with d3:
var vizSVG = d3.select("#viz")
.append("svg:svg")
.attr("width",page_width)
.attr("height",page_height)
I create the CSS rectangles within an HTML style element like this:
<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>
Lastly, I want to add the SVG lines with d3 as follows:
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");
Any suggestions on how to ensure the SVG lines appear above the CSS rectangles?