这是一个老问题，但我发现代码很有用，节省了我三分钟的思考:)所以我在@opsb的答案中添加了一个小扩展。

如果你想把这个弧转换成一个切片(允许填充)，我们可以稍微修改代码:

function describeArc(x, y, radius, spread, startAngle, endAngle){ var innerStart = polarToCartesian(x, y, radius, endAngle); var innerEnd = polarToCartesian(x, y, radius, startAngle); var outerStart = polarToCartesian(x, y, radius + spread, endAngle); var outerEnd = polarToCartesian(x, y, radius + spread, startAngle); var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1"; var d = [ "M", outerStart.x, outerStart.y, "A", radius + spread, radius + spread, 0, largeArcFlag, 0, outerEnd.x, outerEnd.y, "L", innerEnd.x, innerEnd.y, "A", radius, radius, 0, largeArcFlag, 1, innerStart.x, innerStart.y, "L", outerStart.x, outerStart.y, "Z" ].join(" "); return d; } function polarToCartesian(centerX, centerY, radius, angleInDegrees) { var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0; return { x: centerX + (radius * Math.cos(angleInRadians)), y: centerY + (radius * Math.sin(angleInRadians)) }; } var path = describeArc(150, 150, 50, 30, 0, 50) document.getElementById("p").innerHTML = path document.getElementById("path").setAttribute('d',path) <p id="p"> </p> <svg width="300" height="300" style="border:1px gray solid"> <path id="path" fill="blue" stroke="cyan"></path> </svg>

好了!

对于寻求答案的人(我也是)，如果不是必须使用arc，绘制部分圆的一个更简单的解决方案是使用SVG的stroke-dasharray <circle>。

将虚线数组分为两个元素，并将其范围缩放到所需的角度。起始角度可以使用冲程-达霍夫集进行调整。

看不见一个余弦。

完整的例子和解释: https://codepen.io/mjurczyk/pen/wvBKOvP

@opsb的回答很简洁，但中心点不准确，而且，正如@Jithin指出的那样，如果角度是360，那么什么都画不出来。

@Jithin修复了360度的问题，但如果你选择小于360度，那么你会得到一条线关闭弧环，这是不需要的。

我修复了这个问题，并在下面的代码中添加了一些动画:

function myArc(cx, cy, radius, max){ var circle = document.getElementById("arc"); var e = circle.getAttribute("d"); var d = " M "+ (cx + radius) + " " + cy; var angle=0; window.timer = window.setInterval( function() { var radians= angle * (Math.PI / 180); // convert degree to radians var x = cx + Math.cos(radians) * radius; var y = cy + Math.sin(radians) * radius; d += " L "+x + " " + y; circle.setAttribute("d", d) if(angle==max)window.clearInterval(window.timer); angle++; } ,5) } myArc(110, 110, 100, 360); <svg xmlns="http://www.w3.org/2000/svg" style="width:220; height:220;"> <path d="" id="arc" fill="none" stroke="red" stroke-width="2" /> </svg>

PHP有人知道吗?

将接受的答案转换为PHP代码。帮助在服务器上生成弧。

function polarToCartesian($centerX, $centerY, $radius, $angleInDegrees) {
   $angleInRadians = ($angleInDegrees-90) * pi() / 180.0;

  return array(
    "x"=> $centerX + ($radius * cos($angleInRadians)),
    "y"=> $centerY + ($radius * sin($angleInRadians)),
  );
}

function describeArc($x, $y, $radius, $startAngle, $endAngle){

     $start = polarToCartesian($x, $y, $radius, $endAngle);
     $end = polarToCartesian($x, $y, $radius, $startAngle);

     $largeArcFlag = $endAngle - $startAngle <= 180 ? "0" : "1";

     $d = implode(" ", array(
        "M", $start["x"], $start["y"], 
        "A", $radius, $radius, 0, $largeArcFlag, 0, $end["x"], $end["y"]));

    return $d;       
}

<svg>
    <path fill="none" stroke="#446688" stroke-width="20" d="<?= describeArc(150, 150, 100, 0, 30) ?>" />
</svg>

您需要使用椭圆Arc命令。不幸的是，这需要指定起始点和结束点的笛卡尔坐标(x, y)，而不是现有的极坐标(半径，角度)，因此必须进行一些数学计算。下面是一个可以工作的JavaScript函数(虽然我还没有测试它)，我希望它是相当不言自明的:

function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
  var angleInRadians = angleInDegrees * Math.PI / 180.0;
  var x = centerX + radius * Math.cos(angleInRadians);
  var y = centerY + radius * Math.sin(angleInRadians);
  return [x,y];
}

哪些角度对应哪些时钟位置将取决于坐标系;只需要交换sin/cos项。

arc命令有以下参数:

rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, x, y

第一个例子:

rx=ry=25 and x-axis-rotation=0, since you want a circle and not an ellipse. You can compute both the starting coordinates (which you should Move to) and ending coordinates (x, y) using the function above, yielding (200, 175) and about (182.322, 217.678), respectively. Given these constraints so far, there are actually four arcs that could be drawn, so the two flags select one of them. I'm guessing you probably want to draw a small arc (meaning large-arc-flag=0), in the direction of decreasing angle (meaning sweep-flag=0). All together, the SVG path is:

M 200 175 A 25 25 0 0 0 182.322 217.678

对于第二个例子(假设您的意思是走向相同的方向，因此是一个大的弧)，SVG路径是:

M 200 175 A 25 25 0 1 0 217.678 217.678

同样，我还没有测试这些。

如果你像@clocksmith一样，想知道他们为什么选择这个API，看看实现说明。他们描述了两种可能的弧参数化，“端点参数化”(他们选择的那个)和“中心参数化”(就像这个问题使用的那样)。在“端点参数化”的描述中，他们说:

端点参数化的优点之一是它允许一致的路径语法，其中所有路径命令都以新的“当前点”的坐标结束。

所以基本上，这是弧线被视为更大路径的一部分的副作用，而不是它们自己单独的物体。我认为如果您的SVG渲染器是不完整的，它可以跳过任何它不知道如何渲染的路径组件，只要它知道它们接受多少参数。或者它可能支持并行渲染具有多个组件的路径的不同块。或者他们这样做是为了确保舍入误差不会沿着复杂路径的长度累积。

实现说明对于最初的问题也很有用，因为它们有更多用于在两个参数化之间转换的数学伪代码(我第一次写这个答案时没有意识到这一点)。

扩展@wdebeaum的回答，这里有一个生成弧形路径的方法:

function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
  var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;

  return {
    x: centerX + (radius * Math.cos(angleInRadians)),
    y: centerY + (radius * Math.sin(angleInRadians))
  };
}

function describeArc(x, y, radius, startAngle, endAngle){

    var start = polarToCartesian(x, y, radius, endAngle);
    var end = polarToCartesian(x, y, radius, startAngle);

    var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";

    var d = [
        "M", start.x, start.y, 
        "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
    ].join(" ");

    return d;       
}

使用

document.getElementById("arc1").setAttribute("d", describeArc(200, 400, 100, 0, 180));

在HTML中

<path id="arc1" fill="none" stroke="#446688" stroke-width="20" />

现场演示