svg 例子

最新推荐文章于 2022-08-11 08:40:30 发布

hap2yxx1

最新推荐文章于 2022-08-11 08:40:30 发布

阅读量237

点赞数

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

svg 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1{ width:400px; height:400px; background:white;}
body{ background:black;}
</style>
<script>

window.onload = function(){
	
	var svgNS = 'http://www.w3.org/2000/svg';
	var oParent = document.getElementById('div1');
	var oSvg = document.getElementById('svg1');
	
	function createTag(tag,objAttr){	
		var oTag = document.createElementNS(svgNS , tag);	
		for(var attr in objAttr){
			oTag.setAttribute(attr , objAttr[attr]);
		}	
		return oTag;	
	}
	
	//var arrNum = [15,30,40,15];
	var arrNum = [23.61,17.10,16.05,15.40,11.72,14.95];
	var angle = 360;
	var sumNum = 0;
	var outerR = 120;
	var innerR = 70;
	var centerX = 200;
	var centerY = 200;
	var outerXY = [{x : 320 , y : 200}];
	var innerXY = [{x : 270 , y : 200}];
	var arrColor = ['red','blue','yellow','green','black','gray'];
	
	for(var i=0;i<arrNum.length;i++){
		var agNum = arrNum[i]/100 * angle;
		sumNum += agNum;
		
		if(i == arrNum.length-1){
			sumNum = 360;
		}
		
		var outerX = Math.cos( sumNum * Math.PI/180 ) * outerR + centerX;
		var outerY = Math.sin( sumNum * Math.PI/180 ) * outerR + centerY;
		outerXY.push({x : outerX , y : outerY});
		
		var innerX = Math.cos( sumNum * Math.PI/180 ) * innerR + centerX;
		var innerY = Math.sin( sumNum * Math.PI/180 ) * innerR + centerY;
		innerXY.push({x : innerX , y : innerY});
		
	}
	//console.log( outerXY );
	//console.log( innerXY );
	
	for(var i=0;i<outerXY.length;i++){
		
		if(i == outerXY.length-1){
			break;
		}
		
		var oPath = createTag('path',{fill : arrColor[i] , d : 'M'+outerXY[i].x+' '+outerXY[i].y+'A'+outerR+' '+outerR+' 0 0 1 '+outerXY[i+1].x+' '+outerXY[i+1].y+'L'+innerXY[i+1].x+' '+innerXY[i+1].y+'A'+innerR+' '+innerR+' 0 0 0 '+innerXY[i].x+' '+innerXY[i].y});
		
		var oAn = createTag('animate',{attributeName : 'd' , dur : '0.5' , from : 'M'+outerXY[i].x+' '+outerXY[i].y+'A'+outerR+' '+outerR+' 0 0 1 '+outerXY[i].x+' '+outerXY[i].y+'L'+innerXY[i+1].x+' '+innerXY[i].y+'A'+innerR+' '+innerR+' 0 0 0 '+innerXY[i].x+' '+innerXY[i].y,to:'M'+outerXY[i].x+' '+outerXY[i].y+'A'+outerR+' '+outerR+' 0 0 1 '+outerXY[i+1].x+' '+outerXY[i+1].y+'L'+innerXY[i+1].x+' '+innerXY[i+1].y+'A'+innerR+' '+innerR+' 0 0 0 '+innerXY[i].x+' '+innerXY[i].y});
		oPath.appendChild(oAn);
		oSvg.appendChild(oPath);
		
	}
	
};

</script>
</head>

<body>
<div id="div1">
	<svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
       <!--<path d="M50 100L200 200L100 100ZM300 100L300 300" stroke="black" stroke-width="5" fill="none"></path>-->
       <!--<path d="M50 100H200V200" stroke="black" stroke-width="5" fill="none"></path>-->
       <!--<path d="M50 100h200v200" stroke="black" stroke-width="5" fill="none"></path>-->
       <!--<path d="M100 100A150 100 50 1 1 200 200" stroke="black" stroke-width="5" fill="none"></path>-->
       <!--<path d="M150 150A100 100 0 0 1 250 150L225 175A50 50 0 0 0 175 175Z" stroke="black" stroke-width="5" fill="none"></path>-->
    </svg>
</div>
</body>
</html>