为什么以下 SVG 路径在 webkit 中产生截然不同的结果？

Question

我在 SVG 中生成饼图（使用 ruby 库 svg-graph，但这并不完全相关），但有一个奇怪的边缘情况，图表完全空白.这种情况发生在 Chrome 和 Safari 中，但不会出现在 IE11 或 Firefox 中。

我已将范围缩小到某个 path 元素，其 d 属性在两者之间略有不同。一个会产生黄色圆圈，而另一个不会。我的 SVG 知识有限，所以我不明白为什么第二个片段没有输出任何东西。有什么想法吗？

工作：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<path d="M109.0,109.0 L109.0,0.0 A109.0,109.0 0, 1,1, 108.99999000000007 0.0 Z"
      transform="translate( -3.216245299353273e-15 10.0 )"
      style="fill: #FFDC00" />
</g>
</svg>

不工作：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<path d="M108.5,108.5 L108.5,0.0 A108.5,108.5 0, 1,1, 108.49999000000007 0.0 Z"
      transform="translate( -3.216245299353273e-15 10.0 )"
      style="fill: #FFDC00" />
</g>
</svg>

Answer 1

这可能是一个舍入问题。该路径正在尝试使用圆弧路径指令 "A" 绘制圆。圆弧的起点和终点非常靠近（< 0.0000001 个单位）。如果 SVG 渲染器认为这两个点实际上相同，那么它将绘制一个空弧（圆的 0%）而不是几乎完整的（圆的 99.9999%）。

您可以尝试将起点和终点稍微分开一点（例如，尝试 359 度而不是 360 度）；因为 Z 指令无论如何都会关闭路径并隐藏剩下的小楔子。还要查看更多内容，请尝试抚摸路径而不是填充路径。

或者用两个半圆弧画一个圆。参见 Circle drawing with SVG's arc path

为什么以下 SVG 路径在 webkit 中产生截然不同的结果？

Why do the following SVG paths produce dramatically different results in webkit?

html

svg

webkit

blink