js动态添加svg节点

最新推荐文章于 2022-12-02 15:16:17 发布

团长95

最新推荐文章于 2022-12-02 15:16:17 发布

阅读量2k

点赞数 5

分类专栏：工作 web前端文章标签： svg js 前端矢量

原文链接：https://blog.youkuaiyun.com/tomatomas/article/details/50442497

版权

工作同时被 2 个专栏收录

22 篇文章

订阅专栏

web前端

22 篇文章

订阅专栏

下面贴上完整代码。要注意一点：创建svg节点时，要使用createElementNS函数并传入节点名称的命名空间。否则创建出来的节点默认为html dom而不是svg dom。这样的话，将其append到svg节点下时，不会显示。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<meta content="width=device-width;initial-scale=1"> 
<script>
	function onLoad(){
		var mysvg = document.getElementById("svg_my");
		var rectObj = document.createElementNS("http://www.w3.org/2000/svg","rect");
		if(rectObj){
			rectObj.setAttribute("width",100);
			rectObj.setAttribute("height",100);
			rectObj.setAttribute("style","fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)");
			mysvg.appendChild(rectObj);
			alert("hello");
		}
	}
	window.onload = onLoad;
</script>
</head>
 
<body>
	<svg id="svg_my" style="border:1px solid #000;width:200px;height:200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
		
    </svg>
</body>
</html>