Moving SVG group in z with Snap.svg
I am using Snap.svg to create my SVG UI elements.
How can I move a group of shapes Element.group
to the 'front' of all my other shapes? This action will be performed on hover.
Simple JSFiddle example here:
http://jsfiddle.net/offmilk/b0av7jx6/
I am trying to bring back two circles so that they come out forward when they hover.
I know Raphaël has similar functionality for individual elements in a form Element.toFront()
. The creator of both answers answers a similar question here , but I can't seem to add his solution to the setup hover
.
Thanks in advance for your help!
source to share
I think it depends on whether you change the actual SVG or whether you want the SVG to stay the way it is (in which case you need CSS).
As you pointed out toFront (), I assume its OK will change the SVG.
In this case, all you have to do is add the element to the document / svg again and it will be brought to the front.
So, you can write s.append (element) or this.paper.append (element) if you want this to be a function that works for any paper.
For this example, I would like to write it like this using the hover reuse 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 );
source to share