svg js动态生成svg标签

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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值