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

【问题标题】：SVG path element rendered inconsistently between different versions of ChromeSVG 路径元素在不同版本的 Chrome 之间呈现不一致
【发布时间】：2014-12-05 17:39:20
【问题描述】：

早上好，

我使用 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 属性是否有什么特别的问题可能导致它被浏览器不一致地绘制？

非常感谢。

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

【问题讨论】：

如何在 d3 中生成该路径？该路径数据中发生的事情比您想要的输出所需的要多得多。弧段（路径数据中的A）是不必要的，它们在某些浏览器中造成了巨大的圆圈（我猜这是因为不同浏览器对弧扫描标志的解释不同）
这是从 D3 和弦布局 (github.com/mbostock/d3/wiki/Chord-Layout) 中的和弦生成器输出的。当数据矩阵包含小的数据值并且数据矩阵的特征是大范围（例如，0.05 到 1500）时，会输出有问题的路径。我可以通过将小值重新分配 0 值来回避这个问题，这最终不会成为一个大问题，因为它们无论如何都不可见（相对于其他数据而言，值是如此之小）。

标签： svg d3.js chord-diagram

【解决方案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，因为它们没有明确定义。即使浏览器没有自动跳过它，你会认为他们仍然会尊重“短弧”标志并绘制一个零长度的弧。

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

【讨论】：