绘制带路径的部分圆答案

【问题标题】：Drawing a partial circle with path绘制带路径的部分圆
【发布时间】：2021-10-13 09:43:13
【问题描述】：

我正在尝试用 svg 的路径绘制一个部分圆圈。我有圆的中心坐标、半径和开始/结束坐标（部分圆将结束的位置），但我不知道如何绘制圆。

【问题讨论】：

SVG Arc?
所以你需要一个圆形的“披萨片”？它是一条路径重要吗？另一种方法是遮住一个圆圈，这样你就可以得到你需要的切片——这对你来说是一个选择吗？
试试：yqnn.github.io/svg-path-editor

【解决方案1】：

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

在此处查看更多信息：d - Elliptical Arc Curve

// 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>

【讨论】：

感谢您的回答。你描述的方式很有道理，你帮了大忙！