svg js动态生成svg标签

最新推荐文章于 2024-07-31 16:50:09 发布

神奇大叔

最新推荐文章于 2024-07-31 16:50:09 发布

阅读量3.5k

点赞数 1

分类专栏： svg 文章标签： svg

本文链接：https://blog.csdn.net/weixin_43294560/article/details/105017952

版权

svg 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

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>