CODEWITHSUNDEEP
jqueryhtmlcsssvg
Karthi Keyan
Karthi Keyan

Reputation: 137

How do make my svg element comes forth?

I am trying to visualize graph on a page. I am developing it using SVG. I am connecting nodes and creating shapes in the diagram. Whenever I hover a path element it should come on top of all the other path elements. In the following picture I have two paths. The light orange is the first element.

1

In this one you can see the two paths alignment. Blue is the second element which is below the fist path orange. 2

My requirement is when I hover an path it should come on top of all other paths. So that even if I move my mouse pointer to the common place of these two elements, the hovered element will be still showing on top. Right now if I come to the common space(orange + blue) the orange is being highlighted, blue is losing the focus because it is below the orange one. In hover if I make it to the front I can roam all the blue space. I tried z-index but it is not working.

Any solutions or suggestions?

Upvotes: 0

Views: 60

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101800

z-index support is not available yet. It may be possible in the future when browsers fully support SVG 2. For now, you need to physically move the element in the DOM to the end of the SVG.

Something like:

// Get a DOM reference to the back object
var blueThing = document.detElementById("my-blue-thing");
// Move it to the end of the SVG. Later things appear on top.
mysvg.appendChild(blueThing);

Obviously you'll probably want to do that for whatever element you are hovering over.

Upvotes: 2

Related Questions