次のSVGパスは、Webkitで劇的に異なる結果をもたらすのはなぜですか？

Question

私はSVGで円グラフを生成しています（Rubyライブラリsvg-graphを使用していますが、これは完全には関係ありません）。しかし、グラフが完全に空白の奇妙なエッジケースがあります。これはChromeとSafariでは発生しますが、IE11やFirefoxでは発生しません。

私はそれを特定のpathの要素に絞り込みました。その要素のうち、dの属性が少し変わっています。 1つは黄色の円を生成し、もう1つは生成しません。私のSVGの知識は限られているので、2番目のスニペットが何も出力していない理由は分かりません。何か案は？

ワーキング：

<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レンダラーが2つの点が実際に同じであると考えると、ほぼ完全な円（円の99.9999％）の代わりに空の円（円の0％）を描画します。

開始点と終了点を少し離れたところで試してみることができます（360などではなく359度など）。とにかくZ命令がパスを閉じて、小さなウェッジを残すようにします。また、何が起こっているのをもっと見るには、パスを塗りつぶすのではなく、その道を撫でてみてください。

2つの半円円弧を使用して円を描画します。 Circle drawing with SVG's arc path