Overlaying a div on top of a SVG


I have a SVG
notice how the lines turn blue when you hover over them.
I really lie that functionality and want to make boxes to/from each connection,
So created a container (which uses the SVG as its background)
That cool functionality goes away. So I gather I cant use an interactive SVG as a background image
I’ll use this background image instead then
How can put the SVG (with the interactive lines) so it appears under the div?
(So im guessing ill have to do away with the background)



What I like about svgs is that without specific width and height they expand to the parent container.

Floating the SVG and applying z-index:-1; to the SVG will have the same effect as a background image.

The other div components should also fill the div so they expand and contract at the same rate.

Beware: I am unable to test or supply any script because using a tablet.


I tried, but the SVG doesnt overlap the div, its below. Is the z-index not working?
for god measure , I put the SVG before after the links


The z-index works and the SVG float under the divs. Just like @John_Betong suggests. :slight_smile:

The “fid” container has a padding of 63.5% to grow size to fit the AP children. That padding stops the svg to float up so it needs a negative top margin with the same value to fit under the AP divs.

#svg {
	z-index: -1;
	float: right;
	margin-top: -63.5%;

It should come first.

Then I think the extra svg copy last in “fid” should be removed to get the hover work as expected.


I made the change, looks great but why does IE no work soo good?


I really can’t say… :zipper_mouth_face:


they just want to be different. They gots to get there stuff together


man, this is nuts, am still trying to get it to work in IE
I put the SVG in a container to see if that helped
But it still looks odd in IE
I noticed that when I validate it,
I get loads of errors in the SVG
I can probably get rid of any not needed/useless code there
Would that help?

It says IE supports it,