javascript - 有可能从零件中获得完美的 svg 圆圈吗？

Question

我有 4 个圆弧，它们是使用 SnapSVG.js 生成的 问题是上弧之间的间隙高于下弧的间隙 所以我的问题是，我是否可以仅使用 CSS 来修复圆弧之间的间隙并获得一个完美的圆来与调整大小保持一致？

这是原始 JS [我打算稍微清理一下] http://jsfiddle.net/LtLafp2r/

var canvasSize = 200,
    centre = canvasSize/2,
    radius = canvasSize*0.8/2,
    s = Snap('#svg'),
    path = "",
    arc = s.path(path),    
    startY = centre-radius;

var d = 0;
var dr =0;

 radians = Math.PI*(dr)/180,
            endx = centre + radius*Math.cos(radians),
            endy = centre + radius * Math.sin(radians),
            largeArc = d>180 ? 1 : 0;  

var s = Snap("#svg");
// Lets create big circle in the middle:

path = "M"+centre+","+startY+" A"+radius+","+radius+" 0 "+largeArc+",1 "+endx+","+endy;

var arc = s.path(path);
// By default its black, lets change its attributes
 arc.attr({
          stroke: '#3da08d',
          fill: 'none',
          strokeWidth: 25
        });

Answer 1

也许我误会了，但是使用这个 CSS 可以用你的弧线做一个完美的圆:

svg{position:fixed;}
#svg3{left:-72px; top:88px;}
#svg4{left:88px; top:88px;}

http://jsfiddle.net/LtLafp2r/3/

Ps: 有个bug在 Chrome 中渲染路径弧:check this question