绘制带有路径的局部圆

Question

我试图用svg的路径绘制部分圆。我有圆的中心坐标，半径和开始/结束坐标(部分圆将在哪里结束)，但我不知道如何画圆。

Answer 1

希望这个小例子能对你有所帮助。路径从50%，50%(中心)开始，移动到50%，0(即12点钟方向)，创建一个半径x和y为50的弧(a后的前两个数字)，并以sin()和cos()在45度上计算的位置结束(角度应该以弧度为单位)。(0 0 1)之间的三个数字是标志。

d -椭圆弧曲线

// 45 deg:
console.log(Math.cos(Math.PI/4)*50, 50-Math.sin(Math.PI/4)*50);
document.querySelector('path')
.setAttribute('d', `M50,50 L50,0 a 50 50 0 0 1 ${Math.cos(Math.PI/4)*50} ${50-Math.sin(Math.PI/4)*50} z`);

<svg width="200" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50" fill="lightblue" />
<path fill="navy" />
</svg>