javascript - Drawing SVG element on top with smooth transitions -

i have page different svg elements react when hovering on them. when hovering, element increases in size, covering neighbouring elements. trouble of neighbours have been drawn later , won't covered. [example]

i tried fix issue using appendchild() when hovering on make last drawn element, removes smooth transition effect set css.

example:

for (var = 0; < 20; i++) {    (var n = 0; n < 5; n++) {      var new_rect = document.getelementbyid("0").clonenode(true);      new_rect.setattributens(null, "cx", * 20 + 10);      new_rect.setattributens(null, "cy", n * 20 + 10);        new_rect.setattributens(null, "id", + n);      document.getelementbyid("maing").appendchild(new_rect);    }  }    function expand(evt) {    //evt.target.parentnode.appendchild(evt.target);    evt.target.setattributens(null, "r", "25");  }    function shrink(evt) {    evt.target.setattributens(null, "r", "10");  }

.circle {    fill: hsl(100, 30%, 80%);    -webkit-transition: .1s ease-in-out;  }  .circle:hover {    fill: hsl(0, 50%, 70%);  }

<svg version="1.1" baseprofile="full" width="440" height="150" xmlns="http://www.w3.org/2000/svg">    <g id="maing">      <circle id="0" cx="10" cy="10" r="10" stroke="none" fill="white" class="circle" onmouseover="expand(evt)" onmouseout="shrink(evt)"></circle>    </g>    <g id="cloneg"></g>  </svg>

how can both element drawn on top while still having smooth transitions between states?

you can force reflow following..

var test = evt.target.offsetheight; 

do before changing radius

for (var = 0; < 20; i++) {    (var n = 0; n < 5; n++) {      var new_rect = document.getelementbyid("0").clonenode(true);      new_rect.setattributens(null, "cx", * 20 + 10);      new_rect.setattributens(null, "cy", n * 20 + 10);        new_rect.setattributens(null, "id", + n);      document.getelementbyid("maing").appendchild(new_rect);    }  }    function expand(evt) {    evt.target.parentnode.appendchild(evt.target);    var test = evt.target.offsetheight;    evt.target.setattributens(null, "r", "25");  }    function shrink(evt) {    evt.target.setattributens(null, "r", "10");  }

.circle {    fill: hsl(100, 30%, 80%);    -webkit-transition: 1s ease-in-out;  }  .circle:hover {    fill: hsl(0, 50%, 70%);  }

<svg version="1.1" baseprofile="full" width="440" height="150" xmlns="http://www.w3.org/2000/svg">    <g id="maing">      <circle id="0" cx="10" cy="10" r="10" stroke="none" fill="white" class="circle" onmouseover="expand(evt)" onmouseout="shrink(evt)"></circle>    </g>    <g id="cloneg"></g>  </svg>