<path> (SVG) - 大角度的椭圆弧工作不正常答案

【问题标题】：<path> (SVG) - elliptical arcs with big angles are working incorrectly<path> (SVG) - 大角度的椭圆弧工作不正常
【发布时间】：2015-12-09 13:10:20
【问题描述】：

我正在尝试使用 SVG 创建饼图（圆形图）。我决定使用路径元素来表示不同的图表切片。我认为使用椭圆弧来构建路径的机会非常适合这项任务。

但是我遇到了一个问题。例如，我想创建一个包含 2 个切片的图表。其中一个将占圆的 1/4，另一个占 1/2。这是我的代码：

<svg width="200" height="200">
  <path d="M100 100 L200 100 A100 100 0 0 1 100 200 Z" fill="#FF0000"></path>
  <path d="M100 100 L100 200 A100 100 0 0 1 100 0 Z" fill="#0000FF"></path>
</svg>

当第二个切片的角度为 180 度时，一切看起来都很好。

另一个例子。第一个切片采用相同的 1/4 圆。第二个需要 3/4。

我的代码：

<svg width="200" height="200">
  <path d="M100 100 L200 100 A100 100 0 0 1 100 200 Z" fill="#FF0000"></path>
  <path d="M100 100 L100 200 A100 100 0 0 1 200 100 Z" fill="#0000FF"></path>
</svg>

我可以通过将第二个切片的 'large-arc-flag' 属性设置为 1 来解决此问题：

<svg width="200" height="200">
  <path d="M100 100 L200 100 A100 100 0 0 1 100 200 Z" fill="#FF0000"></path>
   <path d="M100 100 L100 200 A100 100 0 1 1 200 100 Z" fill="#0000FF"></path>
</svg>

但这是我的问题：

1) 只是因为我的好奇心，有人可以解释为什么它在第二个 sn-p 中会这样工作吗？

和

2) 如果我根据值数组在循环中动态添加切片，如何计算何时必须将 'large-arc-flag' 设置为 0 以及何时设置为 1？

更新：对不起，第二个问题可能是重复的：link

【问题讨论】：

标签： html svg

【解决方案1】：

在同一个矩形内总是有两条可能的弧线，所以你必须定义你想要的弧线，在这种情况下 0 = 小弧线 1 = 大弧线。
要查看 Arc 是否大，只需查看切片是否超过总数的 1/2。

【讨论】：