最近學習svg，發現svg是“外來戶”與H5標準不完全相容，許多css屬性並不適用與svg，其中就包含z-index；
svg中的元素只會按照生成順序層疊，後來者居上。所以，修改svg中元素層疊關係只能重寫svg的innerHTML了。
注意：如果用apend往svg中追加子元素，建立子元素用document.createElementNS('http://www.w3.org/2000/svg', 'rect');

    <script type="text/javascript">
      var svg={//建立20個隨機圓形
        NUM:20,R:0,CX:0,CY:0
 
,OPICITY:0,
        smethod:function(){
          var html="";
          for(var i=0;i<this.NUM;i++){
            this.R=Math.floor(Math.random()*30+5);
            this.CX=Math.floor(Math.random()*450+25);
            this.CY=Math.floor(Math.random()*350+25);
            var red=Math.floor(Math.random()*250
 
+30);
            var green=Math.floor(Math.random()*250+30);
            var blue=Math.floor(Math.random()*250+30);
            html+=`<circle r='${this.R}' cx='${this.CX}' cy='${this.CY}' fill-opacity='0.5' fill='rgb(${red},${green},${blue})'></circle>`;
            svg1.innerHTML=html;
          }
        },
      }
      svg.smethod();
      svg1.onclick=function
 
(e){ //繫結點選事件，當前事件svg元素會置頂顯示
        var target = e.target;
        var timer = null,i=10,g=0.06;
        if(target.nodeName=='circle'){
          var R = parseFloat(target.getAttribute('r'));
          if(R<80){
            svg1.removeChild(target);
            var html = svg1.innerHTML;

            // html = html.split("");
            // var ahtml = html.push('aaa')
            // console.log(ahtml);      
            // html = html.join("");

            html += target.outerHTML;           
            svg1.innerHTML=html;

            if(timer!=null){
              console.log('aa')
              return;
            }else{
              timer =setInterval(function(){
                i+=10;g+=0.06;
                svg1.lastChild.setAttribute('r', R+i);
                svg1.lastChild.setAttribute('fill-opacity', 0.5+g);
                if(i>=80){
                  clearInterval(timer);
                  timer = null;
                }
              }, 50)
            }
          }else{
            target.setAttribute('r', R-80);
            target.setAttribute('fill-opacity', 0.5);
          }
        }

      }
    </script>

住：快速點選事件會重複賦值timer的BUG未解決