SVG路径元素在不同版本的Chrome之间呈现不一致

Question

早上好，

我用D3创建了一个和弦图。但是我遇到了输出问题，导致某些版本的Chrome中的路径渲染效果不佳。

以下是D3生成的有问题路径的示例：

<svg height="1000px" width="1000px">
    <g transform="translate(400,400)">
    <path d="M329.2336690603744,-46.49130195040491A332.5,332.5 0 0,1 329.2336694247276,-46.491299370194035Q 0,0 -25.421977592957564,-331.5267305290222A332.5,332.5 0 0,1 -25.42197499477598,-331.5267307282548Q 0,0 329.2336690603744,-46.49130195040491Z" class="chord" fill="#c8cfdc" stroke-width="1px" stroke="#000000"></path>
    </g>
</svg>

在大多数浏览器中，我看到一个弧，这是我所期望的。但是在我在Ubuntu 14.04上运行Chrome版本36.0.1985.125的开发机器上，我看到一个大灰色圆圈顶部的弧线。大圆圈破坏了图表的其余部分。

这个路径的d属性是否有任何特别的问题可能导致它被浏览器不一致地绘制？

非常感谢。

这是我出错时所看到的图像：

Answer 1

扩展@jshanley的评论，路径数据的细分如下（为了便于阅读，修整了长小数）：

d="M 329,-46
   //Move the pen to the starting point (329,-46)

  A 332.5,332.5 0 0,1 329,-46
   //draw a circular arc (radius in both directions 332.5 with 0 degrees rotation), 
   //in a clockwise direction taking the shortest route (flags 0,1)
   //ending at point (329,-46).

   //In a normal chord diagram, this is the edge of the chord, which follows the
   //arc of the large circle.

   //However, in this case the start and end points are the same 
   //and nothing should be drawn

  Q 0,0 -25,-331
   //draw a quadratic curve to point (-25, -331) using control point (0,0)
   //this is the curve you see, connecting different points on the large circle

  A 332.5,332.5 0 0,1 -25,-331
   //another arc with the same start and end points, which shouldn't be drawn

  Q 0,0 329,-46
   //Another quadratic curve, the exact same shape as the previous one
   //but going back in the opposite direction;
   //this is what causes the curve to look like a single line, no fill

  Z" 
   //close the shape

这是您正在使用的Ubuntu Chrome版本中的明确错误。在同一点开始和结束的路径弧段supposed to be skipped，无论标记设置是什么，因为它们没有明确定义。即使浏览器没有自动跳过它，你仍然认为它们仍然会尊重“短弧”标志并绘制零长度弧。

如果对特定浏览器版本的支持很重要，则需要在代码中添加错误检查，这样当两端的宽度为零时，或者手动完全没有绘制和弦。编辑路径数据以删除空弧命令。