SVG圆形锯齿状渲染

Question

我在视网膜和非视网膜显示器上有svg循环进度条的渲染问题。我试图使用另一个插件，但问题相同。所有插件都会产生扭曲的锯齿状线条。

来自视网膜的缩放截图： 你可以在这里看到灰线周围的红线 zoomed image

我发现了一件有趣的事情，如果我改变颜色的顺序：第一灰色，然后（顶部） - 红色，它将是更光滑的圆圈，而不是那么锯齿状。

但是在项目中我需要颜色的顺序，例如：

部分代码

var circle = new ProgressBar.Circle('.js_timer', {
        color: '#ccc',
        trailColor: '#e31e24',
        strokeWidth: 6,
        trailWidth: 6,
        duration: 1500,
        easing: 'easeInOut',
        text: {
            value: null
        }
    });

    circle.animate(0.7);

完整示例：http://jsfiddle.net/ouwumbu0/14/

感谢您的帮助！