<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{background: #fff; margin: 0; }
#wrap{background: #f0f0f0; width: 400px; height: 400px;}
</style>
<script>
window.onload = function(){
var svgSN = "http://www.w3.org/2000/svg";
var oWrap = document.getElementById("wrap");
var oSvg = document.getElementById("svg1");
function createTag(tag, objAttr){
var oTag = document.createElementNS(svgSN, tag);
for(var attr in objAttr){
oTag.setAttribute(attr, objAttr[attr]);
}
return oTag;
}
var outerXY = [{x: 20, y: 200}];
var innerXY = [{x: 130, y: 200}];
var centX = 200;
var centY = 200;
var outerR = 180;
var innerR = 70;
var angle = 360;
var num = 6;
var agSum = 0;
for(var i=0; i<num; i++){
var agSum = 60;
var agNum = 60 * i;
agSum += agNum;
if(i == num-1){
agSum = 360;
}
var outerX = centX - Math.cos(agSum * Math.PI / 180) * outerR;
var outerY = centY - Math.sin(agSum * Math.PI / 180) * outerR;
outerXY.push({x: outerX, y: outerY});
var innerX = centX - Math.cos(agSum * Math.PI / 180) * innerR;
var innerY = centY - Math.sin(agSum * Math.PI / 180) * innerR;
innerXY.push({x: innerX, y: innerY});
}
for(var i=0; i<num; i++){
if( i == outerXY.length-1){
break;
}
var oPath = createTag(‘path‘, {‘fill‘: ‘#fff‘, ‘stroke-width‘: ‘30‘, ‘stroke‘: ‘#f0f0f0‘, ‘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 + ‘Z‘});
oSvg.appendChild(oPath);
}
var oCircle = createTag(‘circle‘, {‘cx‘: centX, ‘cy‘: centY, ‘r‘: innerR, ‘fill‘: ‘#fff‘});
oSvg.appendChild(oCircle);
}
</script>
</head>
<body>
<div id="wrap">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
</svg>
</div>
</body>
</html>
效果展示：
