如何调整svg中元素的层级关系

最近学习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未解决

最后

以上就是昏睡棒球为你收集整理的如何调整svg中元素的层级关系的全部内容，希望文章能够帮你解决如何调整svg中元素的层级关系所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。