простая ситуация с SVG

Question

Этот вопрос решен благодаря Блендеру.

Это сводит меня с ума.Это не сложно, но я не могу получить это.Если я удалю параметр i из вызова метода и метода, он разлетится, как я хочу, но только на один кусок.Если я оставлю это, тогда я должен нажать несколько раз, чтобы разойтись.Также posS не имеет ничего общего с чем-либо.Но если я раскомментирую это, то первый кусок не разлетится.Я хочу, чтобы все части разлетелись на части.Извините за некрасивый код, это мой первый раз с этим.

РЕДАКТИРОВАТЬ: теперь posS не взрывается, хотя его почти на основе posT.

       <?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg viewBox='0 0 100 100' version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onclick='startxplode()'>

  <style type="text/css">
      .none { fill: none; }
      .logo { fill: #CFA10A; }
      .edge { stroke: white; stroke-width: .5; }
      .test { fill: blue; opacity: .3; }
  </style>

  <script>
  <![CDATA[
    var min = -45; 
    var max = 45;

    var posT = new Array(4);
    for (i = 0; i < 4; i++) {posT[i] = {x:0, y:0};}

    var st = new Array(4);
    for (i = 0; i < 4; i++) {st[i] = 1;}

    var posS = new Array(9);
    for (i = 0; i < 9; i++) {posT[i] = {x:0, y:0};}

    var ss = new Array(9);
    for (i = 0; i < 9; i++) {ss[i] = 1;}

    var deg = new Array(9);
    for (i = 0; i < 9; i++) {deg[i] = 0;}

    function xplode()
    {
        for (i = 0; i < 4; i++) {runT(i);}
        for (i = 0; i < 9; i++) {runS(i);}
    }

    function startxplode() 
    {
       setInterval(xplode, 40);
    }

    function runT(i)
    {
        if (i==0 || i==2){if (st[i]>0) {st[i]+=.02;}}
        else {st[i]+=.1;}

        if (i<2) {
            posT[i].x -= .4;
            if (i==0){posT[i].y -= .4;}
            else posT[i].y -= .4;}
        else{
            posT[i].x += .4;
            if (i==2){posT[i].y -= .4;}
            else posT[i].y += .4;}

        var projectile = document.getElementById('t'+i);

        projectile.setAttributeNS(null, 'transform', 'translate('+posT[i].x+' '+posT[i].y+') scale('+st[i]+')');

        if (posT[i].x > min && posT[i].x < max) {setTimeout(runT, 40);}
    }

    function runS(i)
    {
        posS[i].x -= .9;
        posS[i].y -= 1.4;
        deg[i] += 1 % 360;

        if (ss[i] > 0) 
              ss[i] -= .03;
        else ss[i] += .05

        var projectile = document.getElementById('s'+i);

        projectile.setAttributeNS(null, 'transform', 'rotate('+deg[i]+') translate('+posS[i].x+', '+posS[i].y+') scale('+ss[i]+')');

        if (posS[i].x > min && posS[i].x < max) {setTimeout(runS, 40);}
    }

    function restart() 
    {
        window.location.reload();
    }
  ]]>
  </script>

    <g transform='translate(40 30)'>
      <polygon id='t0' class='logo edge' points='0,0, 5,0, 0,5'/>
      <polygon id='t1' class='logo edge' points='0,12, 0,17, 5,17'/>
      <polygon id='t2' class='logo edge' points='12,0, 17,0, 17,5'/>
      <polygon id='t3' class='logo edge' points='17,12, 17,17, 12,17'/>
  </g>

  <g transform='rotate(45) translate(49.55, -7.1)'>
      <rect id='s0' class='logo edge' x='3.7' y='-8.3' height='5' width='5'/>  
      <rect id='s1' class='logo edge' x='15.3' y='3.3' height='5' width='5'/>
      <rect id='s2' class='logo edge' x='3.7' y='3.3' height='5' width='5'/>
      <rect id='s3' class='logo edge' x='15.3' y='-8.3' height='5' width='5'/>

      <rect id='s4' class='logo edge' x='8.7' y='-8.3' height='5' width='6.5'/>
      <rect id='s5' class='logo edge' x='3.7' y='-3.3' height='6.5' width='5'/>
      <rect id='s6' class='logo edge' x='15.3' y='-3.3' height='6.5' width='5'/>
      <rect id='s7' class='logo edge' x='8.7' y='3.3' height='5' width='6.5'/>
      <rect id='s8' class='logo edge' x='8.7' y='-3.3' height='6.5' width='6.5'/>
  </g>
</svg>