Draw segment of circle on SVG - svg

Question

Given the next information:
white point is the center of the circle.
blue, green point are points in the border of the circle.
orientation: clockwise, anticlockwise
Using any point (blue, green) with white point, then I can get the radius and I can draw a circle. However I don't want to draw a circle but just the arc of that circle between blue point and green point
Using arc with SVG (A ellipses), I get 2 options with large_arc_flag
In this example: second option is the one that I want: large_arc_flag=1, but sometimes I want large_arc_flag=0. In fact, I want just the arc that belongs to that circle. Using path with "A", I got 2 arcs to chose due to the intersection of ellipses.
How can I solve that?
Thanks!

Answer 1

Given a random circle centre (the white point), one random edge point (green) and a second mirrored edge point (blue), you can calculate the svg arc as follows.
Set the horizontal and vertical ellipse radii to the distance between the green and white points
Set the x-axis-rotation to zero (as rotating a circle makes no visual difference)
Set the large-arc-flag to one if the green point is above the white point, otherwise zero (I think this was the key thing you were asking)
Set the sweep flag to zero because the yellow path is arbitrarily being drawn from the left image border to the right image border, requiring counter-clockwise rotation of the arc path trajectory
Set the final point to the blue point coordinates
Run the code snippet below repeatedly for different arc configurations based on random centre and edge points.
var xmlns = "http://www.w3.org/2000/svg"; // svg namespace
var doc = document; // common abbreviation
var spc = " "; // space
var com = ","; // comma
var wd = 200; // svg width
var ht = 200; // svg height
var svg = doc.querySelector("svg"); // retrieve svg root element
setAttributes(svg, {width: wd, height: ht}); // set the svg dimensions
var cenX = wd / 2; // centre the circle horizontally
var cenY = Math.random() * (ht / 2) + (ht / 4); // pick a random circle centre height
var x1 = Math.random() * (wd / 3) + (wd / 7); // pick a random green point position
var y1 = Math.random() * (ht / 2) + (ht / 4);
var x2 = wd - x1; // mirror the blue point on the green point
var y2 = y1;
showPt(cenX, cenY, "white"); // show the white circle centre
showPt(x1, y1, "green"); // show the coloured edge points
showPt(x2, y2, "blue");
var path = doc.createElementNS(xmlns, "path"); // create the yellow path element
setAttributes(path, { // give it colour and width but no fill
stroke: "yellow",
"stroke-width": 3,
fill: "none"
});
svg.appendChild(path); // add it to the picture
var rad = Math.sqrt((x1-cenX)*(x1-cenX) + (y1-cenY)*(y1-cenY)); // calculate the circle radius
var lgArcFlag = (y1 < cenY ? 1 : 0); // the arc will be large if the edge points are above the circle centre
setAttributes(path, { // create the trajectory of the yellow path
d:
"M" +
"0," + y1 + // start it at the left border at the height of the green edge point
"L" +
x1 + com + y1 + spc + // draw it to the green edge point
"A" + // make an arc
rad + spc + rad + spc + // using the circle radius
0 + spc + // with no rotation of the ellipse/circle
lgArcFlag + spc + 0 + spc + // using the large-arc-flag
x2 + com + y2 + spc + // drawn to the blue edge point
"L" +
wd + com + y1 // and drawn straight out to the right border
});
function showPt(x, y, fill) {
var pt = doc.createElementNS(xmlns, "circle");
setAttributes(pt, {
cx: x,
cy: y,
r: 8,
fill: fill
});
svg.appendChild(pt);
return pt;
}
function setAttributes(el, attrs) {
var recursiveSet = function(at, set) {
for (var prop in at) {
var a = at[prop];
if (typeof a === 'object' && a.dataset === undefined && a[0] === undefined) {
recursiveSet(a, set [prop]);
} else {
set.setAttribute(prop, a);
}
}
}
recursiveSet(attrs, el);
}
<svg>
<rect id="bkgd" fill="black" x="0" y="0" width="300" height="300" />
</svg>