在SVG上绘制圆的线段

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>