title: Moving SVG group in z space with Snap.svg
body: <p>I am using Snap.svg to make elements of my SVG interactive.</p>
  
  <p><strong>How can I move an</strong> <code>Element.group</code> <strong>group of shapes in 'front' of all my other shapes?</strong> This action will take place upon a hover.</p>
  
  <p>A simple JSFiddle example here:</p>
  
  <p><a href="http://jsfiddle.net/offmilk/b0av7jx6/" rel="nofollow">http://jsfiddle.net/offmilk/b0av7jx6/</a></p>
  
  <p>I'm trying to get the back two circles to come to the front when they are hovered over.</p>
  
  <p>I know Raphaël has similar functionality for individual elements in the form of <code>Element.toFront()</code>. The creator of both answers a similar question <a href="https://github.com/adobe-webplatform/Snap.svg/issues/121" rel="nofollow">here</a>, but I'm unable to add his solution to my <code>hover</code> set-up.</p>
  
  <p>Thanks in advance for your help!</p>