SVG Polyline avec stroke-linejoin: arrondi ne montrant pas un angle arrondi

Question

Je vois un problème de rendu étrange dans un fichier SVG que je génère. Je l'ai réduit à un petit cas reproductible.

<?xml version="1.0" encoding="UTF-8"?> 
<svg xmlns="http://www.w3.org/2000/svg"> 
    <polyline points="41,36 40,35 42,37" style="stroke:black; stroke-linecap:round; stroke-linejoin:round; stroke-width:70"/> 
</svg> 

Ce qui produit

(au moins vu dans Safari, Mac Chrome ou Mac Firefox). Je m'attendrais à quelque chose qui ressemble plus à un cercle très légèrement déformé.

Ai-je raté quelque chose? Je suis très nouveau à SVG, donc j'espère que j'ai oublié quelque chose.

Answer 1

Je peux confirmer le rendu dans Safari sous Windows v5.0.4 est ceci:

L'apparition sur Chrome 11.0.696.25 beta (Windows) correspond à ce qui est souhaité:

Le Le problème provient du fait que les trois points que vous avez choisis sont tous exactement le long d'une ligne et font un virage à 180 degrés. Vous obtenez également des résultats 'mauvais' si vous utilisez points="100,0 110,0 90,0". Si vous modifiez le premier point de 41,36 à 41.01,36 vous voyez des résultats corrects dans Safari (et le WebKit nightly build en cours à partir de cette publication):

Cela semble simplement être un ~ bogue dans certains moteurs de rendu, spécifiquement comment ils choisissent de dessiner stroke-linejoin:round lorsque la ligne fait exactement un virage de 180 degrés. J'ai créé a test page montrant ce problème dans le cadre de a bug report contre WebKit.