svgpathraphael

SVG Path half circle (raphael)


I'm trying to create an inner circle which is placed at the bottom of a complete circle. I've been trying to create it using paper.path().

Here is the example jsfiddle here

paper.path("M32,180 L248,180 a15,10 8 0,1 -215,0 z");

Solution

  • Using the sector function like this:

    sector(140, 140, 116, 200, 340, {})
    

    returns almost what you want. Just replace the first move to command to move to the first point of the arc instead of the center of the circle and you are good to go.

    Replace

    return paper.path(["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, "z"]).attr(params);
    

    with

    return paper.path(["M", x1, y1, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, "z"]).attr(params);
    

    and you get:

    paper.path("M30.995655988834628,179.67433662577756L30.995655988834628,179.67433662577756A116,116,0,0,0,249.00434401116536,179.67433662577756z");
    

    which seems to be what you're after.