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

84 阅读 0 评论 56 点赞

我是靠谱客的博主昏睡棒球，这篇文章主要介绍如何调整svg中元素的层级关系，现在分享给大家，希望可以做个参考。

最近学习svg，发现svg是“外来户”与H5标准不完全兼容，许多css属性并不适用与svg，其中就包含z-index；
svg中的元素只会按照生成顺序层叠，后来者居上。所以，修改svg中元素层叠关系只能重写svg的innerHTML了。
注意：如果用apend往svg中追加子元素，创建子元素用document.createElementNS('http://www.w3.org/2000/svg', 'rect');

复制代码

// 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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
    <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>