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

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

非常感谢。

这里是我所看到的图像时出现错误： enter image description here

来源

2014-10-10 Al R.

你是如何在d3中生成该路径的？在路径数据中还有很多事情要比你想要的输出所需要的更多。圆弧段（路径数据中的“A”）是不必要的，它们在某些浏览器中引起了巨大的圆圈（我猜这是因为弧形扫描标志在不同浏览器中被不同的解释） – jshanley 2014-10-10 18:21:44

这是从D3和弦布局中的和弦发生器（https://github.com/mbostock/d3/wiki/Chord-Layout）。当数据矩阵包括小数据值并且数据矩阵以大范围（例如0.05至1500）为特征时，输出有问题的路径。我可以通过重新分配小值为0来避开这个问题，因为它们无论如何都不可见（数值相对于其他数据非常小），所以这不是一个大问题。 – 2014-10-10 20:51:05

扩大对@ 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，无论标记设置是什么，因为它们没有明确定义。即使浏览器没有自动跳过它，你也会认为他们仍然会遵守“短弧”标志并绘制一条长度为零的弧线。

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

来源

2014-10-10 20:42:49 AmeliaBR

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

回答

相关问题