JS Reorder SVG

Using js (jQuery) to re-order the layering of the svg paths.

by nilloc

HTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 120"> 
  <g id="main"> 
    <circle fill="orange" cx="100" cy="75" r="20" onmouseover="putOnTop(event.target)"/> 
    <circle fill="green" cx="100" cy="100" r="20" onmouseover="putOnTop(event.target)"/> 
  </g> 
</svg>

CSS

#one{
    position:absolute;
    z-index:1;
}
#two{
    position:absolute;
    z-index:-1;
}

JavaScript

function putOnTop(target){
	//console.log('mousey', target.parentElement);
  var main = document.getElementById('main');
  main.appendChild(target);
	// var listitems = document.getElementsByTagName('li'); /* Get all list items */
  // var lastitem = listitems[listitems.length - 1]; /* Find the last list item */
  // var parentul = lastitem.parentNode; /* Find the parent element of the items */
  // parentul.insertBefore(lastitem, listitems[0].nextSibling); /* Replacement for insertAfter() */	
}