扇形导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{background: #fff; margin: 0; }
        #wrap{background: #f0f0f0; 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>

效果展示：