Question

我正在尝试使用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）仅仅因为我的好奇心，有人可以在第二个片段解释为什么它会像这样工作吗？

和

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

更新：抱歉，第二个问题可能是重复：link

Answer 1

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

<path>（SVG） - 大角度的椭圆弧工作不正常

1 个答案: