Lines behind SVG objects

[nkev]

Thank you @anseki for a great library! :)

The white line is behind the red rectangle but not behind the blue and green rectangles:

I would like the white line to always be behind all rectangles. Why is the white line behind the red rectangle but not behind the blue and green rectangles?

Please see the code for the above drawing here.

I saw in other issues where you recommend changing the z-index of the line, like this:

.leader-line {
  z-index: 0;
}

...but it does not work with SVG only elements. I read on MDN that the CSS z-index rule does not apply to SVG elements because SVG elements are always based on render order. So I tried creating the white line BEFORE the 3 rectangles by first attaching to hidden elements and then re-attaching the white line to 3 new rectangles. But the white line is STILL only behind the red rectangle and not behind the other two rectangles.

Is there a way to always keep the white line behind the rectangles?

[anseki]

Hi @nkev, thank you for the comment. Your code seems to have bugs about the design. This may help you: https://jsfiddle.net/37xvh5fq/ Maybe you need to learn CSS more.

[anseki]

:smile: