尝试绘制路径弧而不是圆
您可以使用圆弧的开始和结束位置来完成您需要的“切割”。
这是一个为同心圆弧生成路径数据的 javascript 辅助函数。
function regularArcData(cx,cy,radius,startDegrees,endDegrees,isCounterClockwise){
var offsetRadians=0; // -Math.PI/2 for 12 o'clock
var sweepFlag=(isCounterClockwise)?0:1;
var startRadians=offsetRadians+startDegrees*Math.PI/180;
var endRadians=offsetRadians+endDegrees*Math.PI/180;
var largeArc=( (endRadians-startRadians) % (2*Math.PI) ) > Math.PI ? 1 : 0;
var startX=parseInt(cx+radius*Math.cos(startRadians));
var startY=parseInt(cy+radius*Math.sin(startRadians));
var endX= parseInt(cx+radius*Math.cos(endRadians));
var endY= parseInt(cy+radius*Math.sin(endRadians));
var space=" ";
var arcData="";
arcData+="M"+space+startX +space
+startY +space;
arcData+="A"+space+radius +space
+radius +space
+offsetRadians +space
+largeArc +space
+sweepFlag +space
+endX +space
+endY;
return(arcData);
}
这是代码和小提琴：http: //jsfiddle.net/m1erickson/VbqnW/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
</style>
<script>
$(function(){
var svgns="http://www.w3.org/2000/svg";
var svg=document.createElementNS(svgns,"svg");
svg.setAttribute('width', '600px');
svg.setAttribute('height', '600px');
document.body.appendChild(svg);
var cx=150;
var cy=150;
addPath(svg,"arc1","transparent","red", 15,regularArcData(cx,cy,50,0,135,false));
addPath(svg,"arc2","transparent","green",15,regularArcData(cx,cy,65+2,0,180,false));
addPath(svg,"arc3","transparent","blue", 15,regularArcData(cx,cy,80+4,0,215,false));
addPath(svg,"arc4","transparent","orange", 15,regularArcData(cx,cy,95+6,0,250,false));
addPath(svg,"arc5","transparent","purple", 15,regularArcData(cx,cy,110+8,0,270,false));
function addPath(theSvg,id,fill,stroke,strokeWidth,data){
var path=document.createElementNS(svgns,"path");
path.setAttribute("id",id);
path.setAttribute("fill",fill);
path.setAttribute("stroke",stroke);
path.setAttribute("stroke-width",strokeWidth);
path.setAttribute("d",data);
theSvg.appendChild(path);
var pathSvg=""
pathSvg+="\n"
+"<path id='"+id
+"' fill='"+fill
+"' stroke='"+stroke
+"' stroke-width='"+strokeWidth
+"' d='"+data+"'/>";
$("#paths").text($("#paths").text()+pathSvg);
}
function regularArcData(cx,cy,radius,startDegrees,endDegrees,isCounterClockwise){
var offsetRadians=0; // -Math.PI/2 for 12 o'clock
var sweepFlag=(isCounterClockwise)?0:1;
var startRadians=offsetRadians+startDegrees*Math.PI/180;
var endRadians=offsetRadians+endDegrees*Math.PI/180;
var largeArc=( (endRadians-startRadians) % (2*Math.PI) ) > Math.PI ? 1 : 0;
var startX=parseInt(cx+radius*Math.cos(startRadians));
var startY=parseInt(cy+radius*Math.sin(startRadians));
var endX= parseInt(cx+radius*Math.cos(endRadians));
var endY= parseInt(cy+radius*Math.sin(endRadians));
var space=" ";
var arcData="";
arcData+="M"+space+startX +space
+startY +space;
arcData+="A"+space+radius +space
+radius +space
+offsetRadians +space
+largeArc +space
+sweepFlag +space
+endX +space
+endY;
return(arcData);
}
}); // end $(function(){});
</script>
</head>
<body>
<textarea id="paths" cols=130 rows=7>Paths</textarea><br/>
</body>
</html>
