I have an SVG problem with weird behaviors

[lurtnowski]

why does my SVG (which lines change to blue when a mouse hovers any line

Not do that when I use the SVG like

#fid {
	width:100%;
	padding-top:63.33%;
	position:relative;
	margin: auto;
	border: 1px solid #666;
	background-image: url( images/system_architecture.svg );
	background-size: cover;
}

[m_hutley]

I need more information, because your image and your code are defining completely different things.

Basically: “Here is a picture of a duck. Why is my horse sick?”

[spaceshiptrooper]

Changed the title because your main question has nothing to do with a .php file nor anything to do with PHP at all.

[lurtnowski]

thanks, sorry about that

[lurtnowski]

ok,I put the problem area online

http://stevenh.fatcow.com/test/system_architecture.html

The SVG (hovers work)
http://stevenh.fatcow.com/test/images/system_architecture.svg

[SamA74]

I can’t even find the SVG in the example that doesn’t work.

Edit
Found it, you have it as a background image. It’s not going to work as a background, it’s a different document, you can’t have hover effects on external files.

[lurtnowski]

oh, i see, How do I make it so the div uses th SVG for its positioning of the links, like

<div style="position:relative">
<a href="" style="position:absolute...">ANCC</a>
...
...
//SVG
</div>

That way the links and the svg are in the same container

[PaulOB]

@lurtnowski

oh, i see, How do I make it so the div uses th SVG

I believe you could absolutely place the svg into the padding area of that intrinsic ratio div and stretch it to fit but doesn’t seem to work with the svg you have as it seems to contain more whitespace around it. I don’t know much about svg but probably something to do with viewbox etc.

I threw tour svg into illustrator and adjusted the size and then absolutely placed it into the intrinsic padding of the parent and it fitted perfectly and scaled perfectly but of course I lost all your hover effects.

Therefore I’m guessing if you size your example properly it should work but as I said Im not that familiar with svg.

Just for fun I drew a few of your boxes in simple css just to see what it would look like.

It seems to work but obviously takes a lot to do and an svg version would be better.

[lurtnowski]

Im trying to line it up

Viewbox is the thing im trying to get a handle on

[lurtnowski]

ok, did somefinageling, and heres the result,

Is there a better way to get it to line up
and make it responsive?
http://affordablesouthafricanhunting.com/test/system_architecture.html
I tried to absolute position the svg, but was confusedddd

[lurtnowski]

Gt it figured out
http://affordablesouthafricanhunting.com/test/system_architecture.html
Had to get rid of the width/height attributed on the SVG, only used the viewbox. But why does IE no follwthe rest?

[lurtnowski]

I am hitting a stumbling block with this SVG
(im just trying to overlay this (http://stevenh.fatcow.com/test/fid_lines.svg) on top of the blue blocks just to show the connection between them.
But I was thinking, should I just forget the whole SVG mess and duplicate the whole lines functionality to use relative positioning so that IE wont give me any issues?

And it would be ideal to do the whole thing as a SVG, but I dont know how to make the links pop up if IE cant even see the

<foreignobject>

Do you know what I mean?

[PaulOB]

@lurtnowski

I am hitting a stumbling block with this SVG
(im just trying to overlay this (http://stevenh.fatcow.com/test/fid_lines.svg) on top of the blue blocks just to show the connection between them.

You’d be better putting the blue boxes on top of the lines because if the lines are on top you won’t be able to click anything underneath. The blue boxes are fixed width and height so will only obscure the area they occupy whereas the blue lines will lie on top of everything and make it impossible to click anything underneath.

You should be able to position the boxes and lines using the techniques we have already discussed.
Unfortunately I can’t knock up a demo as I am away on holiday soon.

@lurtnowski

and duplicate the whole lines functionality to use relative positioning so that IE wont give me any issues?

Don’t use relative positioning as that won;t work. Use absolute positioning. I gave an example here but is very long winded.

[lurtnowski]

ok, before you go is this the setup I should use,

//first create a div which will be a container for both the blue bexes, and the svg,  Ill give this container this background 
//http://affordablesouthafricanhunting.com/test/fid.svg
//and relative position this div, so I can absolute position the blue boxes
<div id="container">
    //place each box, relatively positioned
   //place the SVG with the lines
  //http://affordablesouthafricanhunting.com/test/fid_lines.svg
</div>
what attributes should the SVG have?

[PaulOB]

@lurtnowski

ok, before you go is this the setup I should use,

The same as I have shown in the codepen assuming the aspect ratio created with the padding is an exact match for the aspect ratio of you lines svg.

You already mentioned previously that you had worked out how to make the svg scalable.

Note that all the elements will be absolutely placed inside the relative parent (you keep mentioning moving with relative positioning but that is not used here).

Sorry I haven’t got time to play with this right now so hopefully one of the others will jump in and help