为什么在此饼图中偶尔会错误地绘制SVG路径？

Question

我正在尝试在Rails应用中创建SVG饼图。我编写了一种大部分时间都可以工作的方法，但偶尔也会产生奇怪的结果。

此图表正在正确构建，但1段除外！

生成该段的SVG代码是

<path d='M0,0 L99.99949084376563,0.3191096796332688 A100,100 0 **0,0** 99.99893303088741,0.46194445996738664 Z' fill='#136F7F' /> 

我认为问题的原因可能是我用**包裹的值（实际代码中没有星星！）。

我正在使用以下方法构建图表，其中提供data作为键值对的哈希值。

svg = "<svg viewBox='-100 -100 200 200'>"
data.each do |d|
svg += "<path d='M0,0 L#{previous_x},#{previous_y} A100,100 0 #{x <= 0 ? 1 : 0},#{y <= 0 ? 1 : 0} #{x},#{y} Z' fill='#{col[i]}' fill-opacity='1' />"
end
svg += "</svg>"

x和y是以弧度表示的线段角度的余弦和正弦值，乘以100.

我是否设置了正确的large-arc-flag和sweep-flag值，这些是导致偶然段失败的原因吗？

Answer 1

连接两个点的弧有4种可能的解决方案。 在下图中

• 逆时针绘制蓝色弧线，顺时针绘制绿色弧线（扫描旗帜）
• 围绕绿色圆圈的中心逆时针绘制小蓝色拱门
• 沿着蓝色圆圈的中心逆时针绘制大的蓝色拱门。
• 围绕蓝色圆圈的中心顺时针绘制小绿色拱门
• 围绕绿色圆圈的中心顺时针绘制大绿色拱门 较暗的弧形是小弧形，较浅的弧形是大弧形（大弧形标记）

告诉渲染你想要哪个弧，你使用大弧和扫描旗的组合。扫描标志确定方向（顺时针，逆时针）大弧标志确定尺寸（大拱，小弧）

<svg width="200" height="200" viewBox="-150 -250  400 400">


  <g fill="none" stroke="black" stroke-width="5">
    <path d="M25.88 -96.59 A100 100 0 0 0 96.59 -25.88" stroke="darkblue" />
    <path d="M25.88 -96.59 A100 100 0 1 0 96.59 -25.88" stroke="lightblue" />
    <path d="M25.88 -96.59 A100 100 0 0 1 96.59 -25.88" stroke="darkgreen" />
    <path d="M25.88 -96.59 A100 100 0 1 1 96.59 -25.88" stroke="lime" />
  </g>
  <g fill="red" stroke="red">
    <circle cx="25.88" cy="-96.59" r="5" />
    <circle cx="96.59" cy="-25.88" r="5" />
  </g>
</svg>
<br/>
<ul>
  <li>
    the blue arcs are drawn counter clockwise, the green arcs clockwise (sweep flag)
  </li>
  <li>
    the small blue arch is drawn counter clockwise around the center of the green circle
  </li>
  <li>
    the large blue arch is drawn counter clockwise around the center of the bleu circle.
  </li>
  <li>
    the small green arch is drawn clockwise around the center of the blue circle
  </li>
  <li>
    the large green arch is drawn cclockwise around the center of the green circle
  </li>
  <li>the darker arcs are small arcs, the lighter arcs are large arcs (large-arc flag)</li>
</ul>