Question

我有一个使用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：Chrome中的渲染路径弧中有bug：check this question

可以从零件中获得完美的svg圆圈吗？

1 个答案: