<!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>
#div1{ 600px;height: 600px;background: white; margin:20px auto; overflow: hidden;}
body{background: gray;}
</style>
</head>
<body>
<div id="div1">
<svg id = "svg1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" >
</svg>
</div>
</body>
</html>
<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 = [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});
}
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});
oSvg.appendChild(oPath);
}
}
</script>
