svg js动态生成svg标签

- 日理万妓 2021-07-24 23:55 682阅读 0赞

1、声明svg命名空间
    	let xx="http://www.w3.org/2000/svg";
    
    2、创建svg标签
    	let x=document.createElementNS(xx,'svg标签名称');
    
    3、操作svg标签
    	操作方法和dom标签一样
    		属性x.setAttribute('xxx','xxx');
    		文本x.innerHTML='xxx';
    	...
    
    封装创建标签函数:
            function createTag(tag标签名,obj属性对象){
                var oTag=document.createElementNS(svgNS,tag);
                for(var attr in obj){
                    oTag.setAttribute(attr,obj[attr]);
                }
                return oTag;
            }

代码示例:  
圈线圈中的圈动态创建:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .box{ 
                width:780px;
                height:400px;
                margin:0 auto;
            }
        </style>
    </head>
    <body>
        <div style="border:solid 1px orange;" class='box'>
            
        </div>
    
        <script>
            window.onload=function(){ 
    
                //命名空间
             let svgNS="http://www.w3.org/2000/svg";
            // //svg通过命名空间创建标签
            // var osvg=document.createElementNS(svgNS,'svg');
    
            // osvg.setAttribute('xmlns',svgNS);
            // osvg.setAttribute('width','100%');
            // osvg.setAttribute('height','100%');
    
            // //获取父级元素
               var div=document.querySelector('.box');
            // div.appendChild(osvg);
    
                //封装创建标签
            function createTag(tag,obj){ 
                var oTag=document.createElementNS(svgNS,tag);
                for(var attr in obj){ 
                    oTag.setAttribute(attr,obj[attr]);
                }
    
                return oTag;
    
            }
    
            var osvg=createTag('svg',{ 'xmlns':'svgNS','width':'100%','height':'100%'})
            var og=createTag('g',{ 'style':'cursor:pointer'});
            var oline1=createTag('line',{ 'x1':'100','y1':'100','x2':'390','y2':'200','stroke':'#ccc'});
            var oline2=createTag('line',{ 'x1':'100','y1':'100','x2':'390','y2':'200','stroke':'transparent','stroke-width':'10'});
            var orect=createTag('rect',{ 'x':'235','y':'140','fill':'#2995FF', 'height':'20','width':'20','rx':'5'})
            var otext=createTag('text',{ 'x':'245','y':'155','text-anchor':'middle','fill':'white'})
            otext.innerHTML='?';
    
            og.appendChild(oline1);
            og.appendChild(oline2);
            og.appendChild(orect);
            og.appendChild(otext);
    
            osvg.appendChild(og);
    
            div.appendChild(osvg);
    
            }
        </script>
    </body>
    </html>