How to control edge rendering order?

[midnight solar]

Hello, I'm running into an issue with z-index (or lack of z-index with svgs) when rendering edges–which is causing some edges to overlap in ways that I'm trying to avoid.

I believe the issue is due to the rendering order of SVG paths. The last g rendering over the previous.

I've had a go at re-ordering my edges so that the highest zIndex values are last, but that didn't seem to have any effect on the rendering order. I could look at interacting directly with the edge pane markup but I'd love to avoid doing that if I didn't have to.

Anyone else run into anything like this before? Am I doing something silly? Any assistance would be gladly appreciated!

Here's an example screenshot. I want the dark line rendered on the top.

Thanks 🙂

[midnight solar]

How to control edge rendering order?

[midnight solar]

OK back to answer my own question. I was missing the zIndex property that can be applied directly onto an Edge.

For future travellers, don't mess with the styles/CSS, lean into the zIndex property because it's being handled differently to handle SVG rendering..

Thanks for the great library!