自动创建图形的svg函数

最新推荐文章于 2024-08-10 07:42:47 发布

从零开始：Syf

最新推荐文章于 2024-08-10 07:42:47 发布

阅读量681

点赞数 1

文章标签： javascript svg

本文链接：https://blog.csdn.net/qq_40450698/article/details/103934883

版权

自己写的SVG绘画函数，分享一下

刚接触svg，还有很多需要学习，一起加油，突然发现文本好像用不了然后有重新改了一下，OK了

<!DOCTYPE html>
<html>
<head>
	<title>SVG简单应用</title>
	<style type="text/css">

		body{
			background: #333;
		}
		div{
			width: 900px;
			height: 500px;
			background: #ddd;
		}
	</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
	var box=document.getElementById('box');
	autoCreateSvg(box,[
		{
			'svg':{'width':'100%','height':'100%'}
		},
		{
			'circle':{'cx':'70','cy':'80','r':'40','fill':'red','stroke':'black'}
		},
		{
			'circle':{'cx':'200','cy':'80','r':'40','fill':'red','stroke':'black'}
		},
		{
			'line':{'x1':'70','y1':'80','x2':'200','y2':'80','stroke':'black'}
		},
		{
			'ellipse':{'cx':"300",'cy':"150",'rx':"10",'ry':"40",'fill':'brown'}
		},
		{
			'text':{'x':"300",'y':"150",'content':'text'}
		},

	]);


	function createTag(tag,attrArr,svgNS="http://www.w3.org/2000/svg"){
		var Tag=document.createElementNS(svgNS,tag);
		for(var attr in attrArr){
			if(attr=='content')
			{	
				Tag.innerHTML=attrArr[attr];
				continue;
			}
			Tag.setAttribute(attr,attrArr[attr]);
		}
		return Tag;
	}
	function addTag(parent,svgArr){
		var tagNum=svgArr.length;
		for(var i=1;i<tagNum;i++)
		{
			svgArr[0].appendChild(svgArr[i]);
		}
		parent.appendChild(svgArr[0]);
	}	
	function autoCreateSvg(parent,tagArr){
		var svgArr=[];
		for(var i in tagArr){
			for(var tag in tagArr[i])
			{
				svgArr[i]=createTag(tag,tagArr[i][tag]);
			}
		}
		addTag(parent,svgArr);
	}
</script>
</body>
</html>