Add z-index to svg

[SevereOverfl0w]

this would make it possible to ensure it's above the elements it is drawing arrows between.

[SevereOverfl0w]

When I did this, I also had to use pointer-events: none; in order to have pointer events (e.g. mouseover) pass straight through to my components.

[pierpo]

Hey! Can you provide more details? Do you want a props to set the z-index?

[SevereOverfl0w]

I'm not sure, I found that I needed to apply styles to the svg, but there wasn't a way to style it.

[mitchellwarr]

Im having the same problem. But just moving the svg to be drawn after the container content was enough to put the arrows on top

react-archer/src/ArcherContainer.js

Lines 330 to 337 in 00d1d02

	<svg style={this.svgContainerStyle()}>
	<defs>{this.generateAllArrowMarkers()}</defs>
	{SvgArrows}
	</svg>
	<div style={{ height: '100%' }} ref={this.storeParent}>
	{this.props.children}
	</div>

Just shifting these two around and making the svg have no pointer-events should be enough.

But that'd need proper testing

[pierpo]

@mitchellwarr I encountered your issue and actually adding z-index: -1 to the SVG container solves the issue, whereas moving the elements as you did doesn't.

Can you give me an example?

[pierpo]

@SevereOverfl0w @mitchellwarr BTW you can use the (yet) undocumented svgContainerStyle to add a -1 z-index.

<ArcherContainer className="container" strokeColor="red" svgContainerStyle={{ zIndex: -1 }}>

Which covers your use case 😊