Moving SVG group in z space with Snap.svg

Question

I am using Snap.svg to make elements of my SVG interactive.

How can I move an Element.group group of shapes in 'front' of all my other shapes? This action will take place upon a hover.

A simple JSFiddle example here:

http://jsfiddle.net/offmilk/b0av7jx6/

I'm trying to get the back two circles to come to the front when they are hovered over.

I know Raphaël has similar functionality for individual elements in the form of Element.toFront(). The creator of both answers a similar question here, but I'm unable to add his solution to my hover set-up.

Thanks in advance for your help!

Answer 1

I think this depends on whether you mind the actual SVG being changed, or whether you need the SVG to remain as it is (in which case you will need CSS).

As you mention toFront(), I'm assuming its ok to change the SVG.

In this case, all you need to do is append the element to the paper/svg again, and it will go to the front.

So you can write s.append( element ) or this.paper.append( element ) if you want this to be a function which works for any paper.

In this example, I would write it like the following with a reusable hover function...

function hoverOverFront() {
    this.paper.append( this );
    this.attr({ fill: 'green' });
}

function hoverOut() { 
    this.attr({ fill: 'black' });
};

back.hover( hoverOverFront, hoverOut ); 
front.hover( hoverOverFront, hoverOut );

jsfiddle