带行程连接的SVG折线：圆形不显示圆角

Question

我在SVG中看到一个奇怪的渲染问题，我正在生成。我把它缩小到一个可重复的小案例。

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

这会呈现为
（至少在Safari，Mac Chrome或Mac Firefox中查看时）。我希望看起来更像是一个非常轻微变形的圆圈。

我错过了什么吗？我对SVG很新，所以希望有一些我忽略的东西。

Answer 1

我可以确认Windows上的Safari v5.0.4中的渲染是这样的：

Chrome 11.0.696.25测试版（Windows）上的外观与所需内容相符：

问题源于这样一个事实，即你所选择的三个点都是沿着一条线完全旋转180度。如果您使用points="100,0 110,0 90,0"，则会得到类似的“糟糕”结果。如果您将第一个点从41,36更改为41.01,36，那么您会在Safari中看到正确的结果（以及此帖子中的WebKit每晚构建当前值）：

这似乎只是某些渲染引擎中的一个错误，特别是当该行完全旋转180度时，他们选择如何绘制stroke-linejoin:round。我创建了a test page，将此问题作为a bug report对抗WebKit的一部分。