Warum erzeugen die folgenden SVG-Pfade in Webkit dramatisch unterschiedliche Ergebnisse?

Question

Ich erzeuge Tortendiagramme in SVG (mit der Ruby-Bibliothek svg-graph, aber das ist nicht völlig relevant), aber es gibt eine seltsame Randfall, wo das Diagramm völlig leer ist. Dies geschieht in Chrome und Safari, aber nicht in IE11 oder Firefox.

Ich habe es auf ein bestimmtes path Element eingegrenzt, dessen d Attribut variiert zwischen den beiden. Einer erzeugt einen gelben Kreis, während der andere nicht. Mein SVG-Wissen ist begrenzt, daher verstehe ich nicht, warum das zweite Snippet nichts ausgibt. Irgendwelche Ideen?

Arbeits:

<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>

Problem:

<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

Dies kann ein Rundungsproblem sein. Der Pfad versucht, einen Kreis zu zeichnen, indem der Bogenpfadbefehl "A" verwendet wird. Die Anfangs- und Endpunkte des Bogens liegen sehr nahe beieinander (< 0,0000001 Einheiten). Wenn der SVG-Renderer denkt, dass die beiden Punkte tatsächlich identisch sind, zeichnet er einen leeren Bogen (0% eines Kreises) anstelle eines fast vollständigen (99,9999% eines Kreises).

Sie können versuchen, die Anfangs- und Endpunkte etwas weiter weg zu trennen (z. B. versuchen Sie 359 statt 360); da die Z-Anweisung den Pfad sowieso schließt und den kleinen verbleibenden Keil versteckt. Um mehr von dem zu sehen, was gerade passiert, versuche den Pfad zu streichen, anstatt ihn zu füllen.

Oder zeichnen Sie einen Kreis mit zwei Halbkreisbögen. Siehe Circle drawing with SVG's arc path