3

I've got 4 arcs of a circle which are generated using SnapSVG.js The problem is that between the upper arcs the gap is higher than the gap of lower arcs So my question is can I fix the gap between arcs and obtain a perfect circle using only CSS to cosistency with resize?

This is a raw JS [I intend to clean it a bit] 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
        });
Xtal
  • 295
  • 5
  • 20
  • Draw 4 circles, clip at each quadrant. Merging them would recreate the circle. Bound it with a
    and use [CSS to resize SVG](http://stackoverflow.com/questions/25279031/on-click-make-svg-resizable/25295895#25295895) . I'm not a fan of drawing circles using arc path.
     – Alvin K. Aug 19 '14 at 08:09

1 Answers1

1

Maybe I'm misunderstanding but using this CSS does a perfect circle with your arcs : 

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

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

Ps: there is a bug in rendering path arcs in Chrome : check this question

Community
  • 1
  • 1
Kaiido
  • 123,334
  • 13
  • 219
  • 285
  • 1
    Note: on IE9 & FF, there are visible gaps between arcs, Chrome is OK. – Alvin K. Aug 19 '14 at 15:38
  • @AlvinK. You're right, I didn't noticed it this morning. But I guess it's an odd bug, since rescaling the panels from jsfiddle seems to change this behaviour, at least on FF. Maybe someone has a clue on how to prevent this? – Kaiido Aug 19 '14 at 23:17