Overlaying a div on top of a SVG

HTML & CSS
1

I have a SVG
http://stevenh.fatcow.com/test/fid_lines.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)
http://stevenh.fatcow.com/test/system_architecture_test.html
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
http://stevenh.fatcow.com/test/system_architecture_test_2.html
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)

Thanks

2

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.

3

I tried, but the SVG doesnt overlap the div, its below. Is the z-index not working?
http://stevenh.fatcow.com/test/system_architecture_test.html
for god measure , I put the SVG before after the links

4

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.

3 Likes
5

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

image
image1234×788 34.5 KB

6

I really can’t say… :zipper_mouth_face:

3 Likes
7

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

8

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
http://affordablesouthafricanhunting.com/test/system_architecture_test.html
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,
https://stackoverflow.com/questions/8926285/svg-browser-support

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.